内容提要
本文介绍使用 electron-builder 打包 Windows 安装包的流程:先安装 electron 和 electron-builder,再在 package.json 中配置 scripts 与 build 字段,包括 appId、productName、asar、输出目录、Windows 图标、管理员权限、NSIS 目标及国内 Electron 下载镜像;NSIS 配置支持非一键安装、允许提权、更改安装目录、创建桌面和开始菜单快捷方式。最后运行 npm run dist 或 yarn dist 生成安装包。
延伸解读
打包前先分清 pack 与 dist 的用途
文章在 scripts 中同时给出了 pack 和 dist 两条命令:pack 对应 electron-builder --dir,只把应用打包成目录;dist 对应 electron-builder,才会生成可分发的安装文件。调试阶段用 pack 可以快速检查打包结果,确认无误后再运行 dist 产出 NSIS 安装包,能减少反复生成安装程序的时间。
NSIS 配置决定安装体验
文章把 oneClick 设为 false,并开启 allowElevation、allowToChangeInstallationDirectory、createDesktopShortcut 和 createStartMenuShortcut。这意味着安装过程不是一键静默完成,而是允许提权、让用户选择安装目录,并创建桌面与开始菜单快捷方式。若希望更简化的安装流程,需要相应调整这些开关,而不是照搬默认值。
国内下载镜像与管理员权限需留意
配置中通过 electronDownload.mirror 指向国内 Electron 下载镜像,主要用于缓解下载缓慢的问题;win.requestedExecutionLevel 设为 highestAvailable,表示应用运行时争取 Windows 管理员权限。图标路径为 icon/icon.png,文章注明尺寸应为 256*256,打包前需确认该文件存在且符合要求。
Q&A
如何安装 electron 和 electron-builder 来打包 Windows 安装包?
使用 yarn add electron electron-builder --dev 或 npm install electron electron-builder --save-dev 进行安装。
package.json 中 scripts 字段需要配置哪些命令?
需要配置 start(启动应用)、pack(打包为目录)、dist(打包为可分发安装文件)三个命令。
electron-builder 的 build 配置中如何设置 Windows 图标和管理员权限?
在 win 字段下设置 icon 为图标路径(256*256),requestedExecutionLevel 为 highestAvailable 以获取管理员权限。
如何让 electron-builder 使用国内镜像下载 Electron?
在 build 配置中添加 electronDownload 字段,设置 mirror 为 https://npm.taobao.org/mirrors/electron/。
NSIS 安装程序如何配置为非一键安装并允许用户更改安装目录?
在 nsis 配置中设置 oneClick 为 false,allowToChangeInstallationDirectory 为 true。
生成 Windows 安装包应该运行什么命令?
运行 npm run dist 或 yarn dist 即可生成安装包。