【Electron】Electron-builder打包Electron应用步骤 常见Electron-builder打包错误解决方法

打包步骤

根据Electron-builder官方文档打包需要分以下几步：

1. 使用npm安装该插件

   npm install  electron-builder -D
   //-D是install的命令参数-save-dev的缩写形式，表示将其当作开发环境依赖
   

   查看更多install的命令参数
2. 生成package.json文件npm init
3. 指定package.json文件中build选项中的配置(配置参数详情)：
   
4. 添加script选项中命令：
   
   通过命令npm run dist以可分发格式(例如dmg、windows安装程序、deb包
   
   通过npm run pack只生成包目录，而不实际打包它。这对于测试目的很有用

问题1：网速过慢导致打包出错

当运行npm run dist时发生报错：

此时根据官方文档设置镜像源为淘宝镜像：

//将 Electron 镜像源设置为淘宝镜像源
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
//将 Electron-builder 镜像源设置为淘宝镜像源
npm config set ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

问题2：淘宝镜像无法下载nsis、winCodeSign依赖

手动下载文件

根据官方文档在相应位置手动防止文件：

nsis 存放位置

C:\Users\admin\AppData\Local\electron-builder\Cache\winCodeSign

winCodeSign 存放位置

C:\Users\admin\AppData\Local\electron-builder\Cache\winCodeSign

将对应版本的文件手动下载后解压至这两个文件夹即可

问题3：ERR_ELECTRON_BUILDER_CANNOT_EXEC乱码报错

运行时又报了一大堆带乱码的东西：

应该是文本编码错误，Makensis 未设置成 UTF-8 字符集

今天又遇到这个问题了，这次修改NsisTarget.js文件依然无用，最后发现把自定义的图标删除，使用默认图标就可以了

打开 node_module/app-builder-lib/out/targets/nsis/NsisTarget.js文件，在 executeMakensis 方法中加入我们所需的参数

//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}`);
      }
    }