electron 配置自定义安装界面

nsis配置

package.json文件中添加配置build配置

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
"build": {
  "appId": "com.example.myapp",
  "productName": "MyApp",
  "directories": {
    "output": "dist_electron"
  },
  "files": [
    "dist/**/*",
    "out/**/*",
    "build/**/*",
    "node_modules/**/*",
    "package.json"
  ],
  "win": {
    "icon": "build/icon.ico",
    "target": [
      "nsis"
    ]
  },
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true,
    "shortcutName": "MyApp",
    "installerIcon": "build/icon.ico",
    "uninstallerIcon": "build/icon.ico",
    "installerHeaderIcon": "build/headerIcon.ico",
    "include": "build/installer.nsh"
  },
  "mac": {
    "icon": "build/icon.icns"
  },
  "linux": {
    "icon": "build/icons",
    "target": [
      "AppImage",
      "deb"
    ]
  }
}

appId：应用程序的唯一标识符，通常遵循反向域名的格式（如 com.example.myapp）。它在应用更新和安装时非常重要。
productName：应用程序的名称，将作为安装程序和应用程序的显示名称使用。
directories：指定输出目录等的相关设置。output: 表示打包后的输出文件存放的目录（例如 dist_electron）。
files：列出要包含在打包中的文件和文件夹，使用通配符来指定路径。

  • 这里的设置表示将 dist、out、build、node_modules 文件夹及 package.json 文件全部包含在内。

win：Windows 平台相关的配置。

  • icon: 指定安装程序和应用程序的图标位置（例如 build/icon.ico）。
  • target: 设定打包后使用的安装程序类型，这里使用 nsis（Nullsoft Scriptable Install System）。

nsis：指定 NSIS 安装程序的相关设置。

  • oneClick: 设置为 false 表示用户安装时会看到多个步骤，而不是一键安装。
  • allowToChangeInstallationDirectory: 允许用户在安装过程中选择安装目录。
  • shortcutName: 设置安装完成后桌面或开始菜单的快捷方式名称。
  • installerIcon: 在安装程序中使用的图标。
  • uninstallerIcon: 卸载程序中使用的图标。
  • installerHeaderIcon: 安装程序界面顶部的图标。
  • include: 指定额外的 NSIS 脚本文件（例如 build/installer.nsh），用于自定义安装过程。

mac：Mac 平台相关的配置。

  • icon: 指定在 Mac 上应用图标的位置（例如 build/icon.icns）。

linux：Linux 平台相关的配置。

  • icon: 指定在 Linux 上应用图标的位置（build/icons）。
  • target: 指定打包后可选的安装包格式，这里有 AppImage 和 deb。

在build目录下自定义nsh脚本文件

1
2
3
!macro customInit
  MessageBox MB_OK "欢迎使用 MyApp 安装程序！"
!macroend

然后打包 npm run build

详细配置参考文档：nsis

效果


打包托盘图标丢失

1
2
3
4
5
"files": [
  "dist/**/*",
  "out/**/*",
  "build/**/*",
]

files 打包时包含那些文件，也就是这些目录下的文件都会被打包进安装包。

如果托盘图标丢失，检查图标文件目录是否包含到打包文件中