基于vue3+vite的web项目改为Electron桌面应用（二）

一、项目打包步骤

1. 修改electron/main.js文件

添加以下代码：

const NODE_ENV = process.env.NODE_ENV
 
 
 mainWindow.loadURL(
    NODE_ENV === 'development'
    ? 'http://localhost:8889'
    :`file://${path.join(__dirname, '../dist/index.html')}`
  ); 
  // 打开开发工具
  if (NODE_ENV === "development") {
    mainWindow.webContents.openDevTools()
  } 

2. 安装electron-builder

pnpm i electron-builder -D

3. 修改package.json文件

添加以下代码：

"electron:build": "electron-builder",
 
 
 
"build": {
    "appId": "com.demo.myApp",  //包id 格式:com.xxx.项目名
    "productName": "myApp", // 项目名
    "copyright": "Copyright © 2024 <your-name>", // 版权信息
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": true // 卸载应用清除用户缓存
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets", //静态文件资源获取目录
      "output": "dist_electron" // 打包位置,会新建到项目根目录
    }
  },

4. 打包 electron

1）执行打包命令：

pnpm run electron:build

2）第一次打包报如下错误：

解决方案：关闭杀毒软件、以管理员身份运行命令后再次打包

2）再次打包，不再出现以上错误，但发生如下错误：

解决方案：降级 electron-builder

pnpm i electron-builder@24.9.1 -D

参考链接：

!include: could not open file: build failed in github action with app-builder-lib · Issue #8175 · electron-userland/electron-builder · GitHub

3）降级后再次执行打包命令，最后打包成功如下：

二、安装打包程序

1. 打开dist_electron文件夹找到打包好的应用程序

2. 安装应用程序

3. 启动应用程序