electron electron-builder windows安装包打包

electron electron-builder windows安装包打包

💡 原文中文,约1000字,阅读约需3分钟。
📝

内容提要

本文介绍使用 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 即可生成安装包。

🏷️

标签

➡️

继续阅读