一、安装及打包

1.安装node.js和npm(略)

2.安装electron-builder

1
2
// yarn add electron-builder --save-dev
npm install electron-builder --save-dev

3.添加脚本

package.json

1
2
3
"scripts": {
"dist": "electron-builder --win --x64"
},

4.运行打包命令

自动从网上下载winCodeSign、nsis和nsis-resources文件到C:\Users\algz\AppData\Local\electron-builder\Cache 目录。(由于外网原因会下载失败,需手动下载文件,详细见“二、打包时的网络问题”)

1
>npm run dist

5.package.json 全部配置说明(可选)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
"scripts": {
"dist": "electron-builder --win --x64"
},
"build": {
    "appId": "avicit.sysfamily.modsim", //包名
    "productName": "ModSim", //exe文件名称
    "copyright": "Copyright © 2024 Avicit", //版权信息
"directories": { // 输出文件夹
      "buildResources": "assets", // 资源文件输出文件夹
      "output": "release/${version}" //文件输出文件夹
    },
    "win": { //win 平台配置
      "icon": "./public/icons/modsim.png",
      "target": [
        {
          "target": "zip", // zip打包成zip文件;nsis打包成安装包。
          "arch": ["x64"] //64位,32位(ia32)
        }
      ],
      "artifactName": "${productName}-Windows-${version}.${ext}"
    },
    "linux": {
      "icon": "./public/icons/modsim.png",
      "target": [
        "zip"
      ],
      "artifactName": "${productName}-Linux-${version}.${ext}"
    },
"mac": {
      "category": "public.app-category.utilities",
      "target": [
        "dmg"
      ],
      "artifactName": "${productName}-Mac-${version}.${ext}"
    },
    "nsis": {
  "oneClick": false, // 是否一键安装
"allowElevation":true, // 是否允许请求提升。false,则用户必须提升权限才能启动。
  "allowToChangeInstallationDirectory": true, //是否允许修改安装目录
"installerIcon":"./build/icons/install.icon",
"uninstallerIcon":"./build/icons/install.icon",
"installerHeaderIcon":"./build/icons/install.icon",
"createDesktopShortcut":true, // 是否创建桌面图标
"createStartMenuShortcut":true, // 是否创建开始菜单图标
"shortcutName":"图标名称",
"perMachine": false,
"language": "2052"
    },
"publish":[ { //配置更新
"provider":"generic", // 服务器提供商名称
"url":"http://xxxxxx/" // 更新地址
}],
    "files": [
      "dist/**/*",
      "dist-electron/**/*"
    ],
    "asar": true,
    "extraResources": [{
        "from": "modsim-glsp-server/",
        "to": "server"
      }]
  }

二、打包时的网络问题

在electron使用electron-builder打包过程中需要用到几个github上的包,但是由于网络原因,下载不下来,导致出错;

1. electron-v30.0.8-win32-x64.zip (配置国内源,可自动下载)

导致的原因:
An existing connection was forcibly closed by the remote host.

远程主机强制关闭了现有的连接。
A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.

连接尝试失败,因为被连接方在一段时间后没有正确响应,或者建立的连接失败,因为连接的主机没有响应。

解决方法二种:
(1) 手动下载zip文件,放到相应目录中。(不解压)

[!NOTE]
macOS: ~/Library/Caches/electron
Linux: ~/.cache/electron
windows: c:/user/xxx/AppData/Local/electron/Cache

(2) 配置国内源
项目目录下新建.npmrc 文件,添加以下内容 (找国内镜像,npmmirror 中国镜像站。),执行打包命令自动下载。

1
electron_mirror=https://npmmirror.com/mirrors/electron/

2. winCodeSign-2.6.0.7z (需手动下载)

配置国内源不会访问,需手动下载并解压到指定目录。

下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6 .0/winCodeSign-2.6.0.7z


下载后解压放到对应的目录%LOCALAPPDATA%/electron-builder/Cache/winCodeSign/winCodeSign-2.6.0

3. nsis-3.0.4.2.7z (需手动下载)

配置国内源不会访问,需手动下载并解压到指定目录。

下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z

直接放到对应的目录里面 `%LOCALAPPDATA%/electron-builder/Cache/nsisnsis-3.0.4.2

4. nsis-resources-3.4.1.7z (需手动下载)

配置国内源不会访问,需手动下载并解压到指定目录。

下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z

直接放到对应的目录里面

1
windows: %LOCALAPPDATA%/electron-builder/Cache/nsisnsis-resources-3.4.1

再次打包:


成功!!!

三、devDependencies与dependencies的区别

  • dependencies 表示我们要在生产环境下使用该依赖,
  • devDependencies 则表示我们仅在开发环境使用该依赖。
    在打包时,一定要分清哪些包属于生产依赖,哪些属于开发依赖,尤其是在项目较大,依赖包较多的情况下。