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-client

3、安装项目依赖：

$ 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 electron

6.1 创建 Electron 主进程入口文件

$ touch index.js

index.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 dev

7.2、Electron 开发

$ yarn electron:dev

7.3、打包应用

$ yarn app:build