Electron + Vue3 + Vite 开发桌面应用 | 环境搭建
效果图
技术选型
- Electron 25.2.0
- Vite 4.3.9
- Vue 3.2.47
- Yarn 1.22.18
开发步骤
1、执行如下命令创建一个新的Vite项目：
$ yarn create vite输入项目名称：electron-client，选择框架：Vue，之后选择使用JavaScript。
2、进入项目根目录：
$ cd electron-client3、安装项目依赖：
$ yarn add --dev electron concurrently cross-env electron-builder wait-on说明：
- --dev：将包添加为开发依赖项；
- concurrently：用于同时运行多个命令；
- cross-env：用于设置环境变量；
- electron-builder：用于构建和打包 Electron 应用程序；
- wait-on：用于满足指定条件后再执行命令；
4、修改package.json文件：
4.1、添加build节点：
"build": {
"appId": "cn.ddcherry",
"productName": "electronClient",
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "electron_dist"
}
}说明：
- build节点：用于设置 Electron 应用程序的打包配置信息；
- appId：应用程序的唯一标识符，用于在构建过程中识别应用程序；
- productName：用于指定打包后的应用程序名称；
- nsis：用于指定 NSIS（Nullsoft Scriptable Install System）安装程序的配置选项。
- oneClick：是否启用一键安装，此处设置为false，表示禁用一键安装；
- allowToChangeInstallationDirectory：是否允许用户在安装过程中选择安装目录，此处设置为true，表示允许用户在安装过程中选择安装目录；
- files：指定构建应用时需要包含在安装程序中的文件列表，本示例中的配置表示在构建过程中会将dist文件夹和electron文件夹下的所有文件打包进安装程序中；
- directories：
- buildResources：指定构建过程中资源文件位置；
- output：指定构建输出文件的目录；
4.2、修改scripts节点：
"scripts": {
"dev": "vite",
"electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .",
"electron:pack": "electron-builder --dir",
"electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"",
"app:build": "yarn build:for:electron && yarn electron:builder"
},说明：
- "electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron ."：等待端口3000上的服务器启动，环境变量IS_DEV为true，然后启动 Electron 应用；
- "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\""：使用concurrently同时执行两个命令；
- cross-env BROWSER=none yarn dev：启动 Vite 开发服务器，并禁止在浏览器中打开应用程序；
- yarn electron：启动 Electron 应用程序；
- "app:build": "yarn build:for:electron && yarn electron:builder"：首先运行 "yarn build:for:electron" 命令构建适用于 Electron 的应用程序。然后使用 "yarn electron:builder" 命令来打包 Electron 应用程序。
4.2、添加main节点：
"main": "electron/index.js",在package.json中添加main节点，用于指定 Electron 主进程的入口文件。
5、编辑vite.config.js：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
+ base: process.env.ELECTRON == 'true' ? './' : '',
plugins: [vue()],
})
base属性用于指定项目的基础路径。
当环境变量ELECTRON的值为true时，将base属性值设置为'./'，即 Electron 应用程序中，静态资源的基础路径将是当前目录。
当环境变量ELECTRON的值不是true时，将base属性值设置为''，即非 Electron 应用程序中，静态资源的基础路径将是根路径。
6、创建electron文件夹并进入electron文件夹
$ mkdir electron && cd electron6.1 创建 Electron 主进程入口文件
$ touch index.jsindex.js文件内容：
// electron 主进程入口文件
const path = require('path');
const { app, BrowserWindow } = require('electron');
// 是否是开发环境
const isDev = process.env.IS_DEV == "true" ? true : false;
function createWindow() {
// 创建主窗口
const mainWindow = new BrowserWindow({
// 窗口宽度
width: 1000,
// 窗口高度
height: 800,
// 窗口预设配置
webPreferences: {
// 指定预加载脚本
// preload: path.join(__dirname, 'preload.js'),
// 允许在窗口中使用 Node.js 的 API
nodeIntegration: true,
},
});
// 主窗口加载URL
mainWindow.loadURL(isDev ? 'http://127.0.0.1:5173' : `file://${path.join(__dirname, '../dist/index.html')}`);
// 如果是开发环境，打开调试工具
if (isDev) {
mainWindow.webContents.openDevTools();
}
}
// Electron应用程序入口，应用程序准备好后执行回调函数
app.whenReady().then(() => {
createWindow();
// 监听激活事件
app.on('activate', function () {
// 如果当前没有打开的窗口，则创建一个新的窗口
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
})
});
// 监听窗口关闭事件，当所有的窗口都关闭了执行回调函数
app.on('window-all-closed', () => {
// 当当前系统不是macOS，退出应用程序
if (process.platform !== 'darwin') {
app.quit();
}
});代码中的注释已经非常详细了，这里汪小成就不多做说明了。
7、程序运行、打包
7.1、浏览器开发
$ yarn dev7.2、Electron 开发
$ yarn electron:dev7.3、打包应用
$ yarn app:build