Electron-builder 打包exe 安装程序

趁热把博客写了，这几天在把网页套壳做成假C/S，用了electron，先直接说一下怎么把electron项目打包
用yarn装electron-builder，我没有全局装，只在这个electron项目文件夹里装，

yarn add electron-builder --save-dev

然后就要对package.json里敲东西配置，下面是我成功打包出来installer.exe的：

{
  "build": {
    "productName":"我的第一个软件",
    "appId": "com.example.app",
    "win": {
      "icon": "./imgs/icon.ico",
      "target": [
        "nsis"   //写成这个就决定打包出来的是个安装程序，下面再讲一下我理解的这个target
      ]
    },
    "nsis":{
      "installerIcon":"imgs/icon.ico",
      "uninstallerIcon":"imgs/icon.ico",
      "uninstallDisplayName":"卸载这个软件",
      "oneClick":false,
      "allowToChangeInstallationDirectory": true,
      "allowElevation": true,
      "createDesktopShortcut": true
    }
  },
  "name": "my_exe",
  "version": "0.1.0",
  "description": "Win64_myexe 2020.12.11",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "electron-builder --win --x64"  //到时候直接npm run build就开始打包
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {    //开发环境依赖
    "electron": "^11.0.4",
    "electron-builder": "^22.9.1"
  }
}

target可以是一个数组，下面是第一次测试的项目的package.json，这个打包出来就是一个压缩包，解压出来直接用exe

{
  "build": {
    "appId": "com.example.app",
    "win": {
      "target": [
        "zip"   //可以看到这里写成了数组的形式，但是只有一个元素zip，决定了输出一个压缩包
        		//而且和上面那个.json比较起来，没有了nsis的配置文件，上面代码中nsis还可以配置很多，很有意思
      ]
    }
  },
  "name": "demo1",
  "version": "1.0.0",
  "description": "test",
  "main": "main.js",
  "dependencies": {},
  "devDependencies": {
    "electron": "^11.0.4",
    "electron-builder": "^22.9.1"
  },
  
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "electron-builder --win --x64"
  },
  "author": "",
  "license": "ISC"
}

配置后如果命令行报错，先不要慌，看错误，刚开始以为缺东西，把NSIS都下载下来了，其实不用的，他会自己去下载的

比如上图能看到Details下面两个*开头的问题，是nsis找不到那两个peoperty，是我拼写错了
还遇到的问题是设置的软件图标，必须是ico格式，注意读错误信息，不过确实好多0.0
最后不报好多的npm ERR! 像下图这样就没问题啦，去项目文件夹下的dist文件夹找就好了

参考资料

• electron打包：electron-packager及electron-builder两种方式实现（for Windows）：
  https://segmentfault.com/a/1190000013924153
• electron-builder打包见解： https://juejin.cn/post/6844903693683261453
• B站转载的国外使用electron-builder的视频，有中文字幕
  https://www.bilibili.com/video/BV1Df4y127ri?from=search&seid=16624973069040224741