Electron-vue项目打包遇坑-526互联

项目背景

一个Electron+vue2的桌面应用项目，进行打包
使用了vue-cli-plugin-electron-builder将Electron和vue结合

直接使用electron-builder打包

问题一：打包后，background.js中会出现模块引入报错。Electron是commonJs规范，但使用了ESM规范
```
import {
  createProtocol
} from 'vue-cli-plugin-electron-builder/lib'
```
问题二：大量文章都将build option写入package.json，但是实际上需要写入vue.config.js中
问题三：当为了解决第一个问题，删去createProtocol的引入，会导致exe直接找不到index.html。如果规范模块化，使用type:'es'，会导致node的内置模块无法使用。

使用框架内置打包electron:build

由于github网络等问题，需要手动下载打包相关的资源：

electron-v8.2.0-win32-x64.zip
winCodeSign-2.6.0.7z
nsis-3.0.4.2.7z
nsis-resources-3.4.1.7z

相关安装步骤可看以下文章：https://blog.csdn.net/qq_32682301/article/details/105234408

打包build option配置

  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        productName: "Barrage",
        appId: "electron.app",
        asar: false, //是否将源代码打包为asar.exe
        nsis: {
          "oneClick": false, // 是否一键安装
          "allowElevation": true, // 允许请求提升。若为false，则用户必须使用提升的权限重新启动安装程序。
          "allowToChangeInstallationDirectory": true, //是否允许修改安装目录
          "installerIcon": "./src/assets/my2.ico",// 安装时图标
          "uninstallerIcon": "./src/assets/my2.ico",//卸载时图标
          "installerHeaderIcon": "./src/assets/my2.ico", // 安装时头部图标
          "createDesktopShortcut": true, // 是否创建桌面图标
          "createStartMenuShortcut": true,// 是否创建开始菜单图标
          "shortcutName": "all-electron", // 快捷方式名称
          "runAfterFinish": false,//是否安装完成后运行
        },
        win: {
          target: 'nsis',
          icon: './src/assets/my2.ico'
        },
        electronDownload: {
          mirror: "https://npm.taobao.org/mirrors/electron/"
        },
        extends: null
      }
    }
  },