Electron和vue3集成（可用于生产打包）

注意：我使用的是node版本16.20.1，因为electron-builder插件仅支持到node17、不支持node18，而node16是LTS版本，所以我选择16

1、初始化vue项目

复制代码

npm install -g vue
vue create 项目名称

cd 项目目录

我尝试了用脚手架初始化方式：npm create vue@latest

最后启动有问题，所以先用简单初始化

2、添加vue-cli-plugin-electron-builder插件

复制代码

vue add electron-builder

Choose Electron Version
选择13.0.0

3、安装完了，运行一下试试

复制代码

npm run electron:serve

运行问题1：

Launching Electron时，可能会报Failed to fetch extension, trying 4 more times的错误

可以禁用Vue Devtools，编辑src\background.js，注释掉installExtension(VUEJS3_DEVTOOLS)

复制代码

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      //注释掉这行
      // await installExtension(VUEJS3_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

4、安装其他插件

第一步的vue create只是初始化一个基本项目框架，如果还需要安装其他核心插件（比如vue-router），可以通过vue控制台导入当前项目后安装

复制代码

vue ui

导入--》选择项目文件夹--》导入这个文件夹--》左侧菜单/插件--》右上角/添加插件--》查找插件@vue/cli-plugin-router--》点击官方插件那行--》右下角/安装--》完成安装--》继续

5、打包

复制代码

npm run electron:build

打包问题1：

可能会卡在downloading，我们可以根据命令行输出的提示，预先下载包放到或解压到本地目录，就会自动跳过下载开始打包

electron-xxxx.zip，拷贝到C:\Users\用户名\AppData\Local\electron\Cache\electron-xxxx.zip

winCodeSign-xxx.7z，解压到C:\Users\用户名\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-xxx\

nsis-xxx.7z，解压到C:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-xxx\

nsis-resources-xxx.7z，解压到C:\Users\用户名\AppData\Local\electron-builder\Cache\nsis\nsis-resources-xxx\

打包问题2：

如果你的windows用户名是中文，路径带中文有可能会报错Error in script "<stdin>" on line 75 -- aborting creation process

打开 node_module/app-builder-lib/out/targets/nsis/NsisTarget.js文件，在 executeMakensis 方法中加入一个参数，表示使用UTF-8编码

复制代码

//node_module/app-builder-lib/out/targets/nsis/NsisTarget.js
async executeMakensis(defines, commands, script) {
    const args = this.options.warningsAsErrors === false ? [] : ["-WX"];
    //此处新增
    args.push("-INPUTCHARSET", "UTF8");
    //结束
    for (const name of Object.keys(defines)) {
        const value = defines[name];

        if (value == null) {
            args.push(`-D${name}`);
        } else {
            args.push(`-D${name}=${value}`);
        }
    }
}