使用electron-builder打包过程中趟过的那些坑

electron-builder相比于electron-packager有更丰富的的功能，支持更多的平台，同时也支持了自动更新。除了这几点之外，由electron-builder打出的包更为轻量，并且可以打包出不暴露源码的setup安装程序。下面介绍一些electron-builder的使用方法:

首先安装对应的打包工具,全局安装使用起来更方便

npm intall electron-builder -g

在项目的package.json文件中配置 electron-builder相关参数:

{
  "name": "test-electron",
  "version": "1.0.0",
  "description": "ceshi",
  "main": "main.js",
  "author": "",
  "license": "ISC",
  "electron": "^15.3.0",
  "assar": true, //判断是否加密
  "copyright:"Copyright@ 2021 huayu", //版权
  "build": {
    "appId": "com.test-electron.app", //应用的Id
    "mac": {
      "target": [  //包格式
        "dmg",
        "zip"
      ]
    },
    "win": {
      "target": [ 
        "nsis", //安装程序包的格式
        "zip"
      ]
    },
    "nsis":{
        "oneClick":false, //是否一键安装
        "language":"2052",//安装语言(中文)
        "perMachine":true, //给机器上所有用户安装
        "allowToChangeInstallationDirectory":true//让用户选择安装目录
    },
    "squirrelWindows":{
        "loadingGif":"resources/loading.gif", //配置安装loading动画
        "iconUrl":"http://***.com/icon.ico" //icon的远端地址
    }
  },
  "scripts": {
    "dist": "electron-builder --win --x64",
    "pack": "electron-builder --win --x64"
  },
  "devDependencies": {
    "electron": "^15.3.0",
    "electron-builder": "^22.13.1"
  }
}

配置了对应的脚本之后执行打包命令

//npm 安装对应的包
npm install 
//打包成对应的安装包
npm run dist

打包的时候可能会报一些错误,一般是由于网络问题导致的包下载失败

1.这是因为winCodeSign下载失败导致的错误

需要人手动下载对应的安装包放到对应的目录下

下载地址

<1>.github地址

Release winCodeSign-2.6.0 · electron-userland/electron-builder-binaries · GitHub

<2>.百度网盘

链接：https://pan.baidu.com/s/1_a0qQtIZvFrTsYxrYxMRHQ

提取码：4t96

下载完毕之后解压放到对应的目录下目录地址如下:

%LOCALAPPDATA%\electron-builder\Cache\winCodeSign\winCodeSign-2.6.0

2.这是因为electron-v15.3.0-win32下载失败引起的

下载地址1

https://github.com/electron/electron/releases/

下载地址2

链接：https://pan.baidu.com/s/1R1Vka9DhKq6MQRfr2wzVYA

提取码：pilf

下载之后将压缩包放到对应的目录下

macOS: ~/Library/Caches/electron
Linux: ~/.cache/electron
windows: %LOCALAPPDATA%\electron\cache

需要注意的是，除了这个压缩包以外，还要把对应的SHASUMS256.txt-文件也下载下来放进去txt文件需要按照截图格式命名才会生效，且里面只保留对应版本的编码。

3.上面的现象是因为缺少nsis-3.0.4.2引起的

下载地址

1.github地址

https://github.com/electron-userland/electron-builder-binaries/releases/tag/nsis-3.0.4.2

2.百度网盘

链接：https://pan.baidu.com/s/1eopB_uY5yVkP6XJ5qtVfiA

提取码：o1zk

下载完毕之后解压放到对应的目录下面目录地址为:

%LOCALAPPDATA%\electron-builder\Cache\nsis\nsis-3.0.4.2

4.上面的现象是nsis-resources-3.4.1文件下载失败引起的

下载地址

1.github地址

Release nsis-resources-3.4.1 · electron-userland/electron-builder-binaries · GitHub

2.百度网盘地址

链接：https://pan.baidu.com/s/1xcWKzh7g7w72US2TeDBwMg

提取码：5wx4

下载之后解压放到对应的目录下

%LOCALAPPDATA%\electron-builder\Cache\nsis\nsis-resources-3.4.1

完成上面的四个文件的手动下载部署之后使用electron-builder打包就可以了

npm run dist 

对应的打包结果如下图所示,会生成对应的安装包可执行程序。