1. 为什么需要安装程序
当我们在Windows平台开发Electron应用时,直接运行exe文件是最简单的操作方式。但实际交付场景中,用户期望的是完整的安装体验:创建开始菜单快捷方式、写入系统注册表、选择安装路径等专业功能。这就像网购时收到的包裹——没人希望收到散装的零件,而是期待精美的包装盒和完整的说明书。
electron-builder作为Electron官方推荐的打包工具,与NSIS(Nullsoft Scriptable Install System)的结合就像搭乐高积木。前者负责将Electron应用编译成可执行文件,后者则像专业装修队,把各种文件精准部署到指定位置,并创建完整的安装流程。
2. 环境准备与项目配置
2.1 基础环境搭建
确保已安装:
# Node.js v16+(建议使用LTS版本)
node -v
# npm v7+
npm -v
# Windows环境下需要安装Visual Studio Build Tools
# 安装包可在微软官网下载
2.2 项目初始化
在现有Electron项目根目录执行:
npm install electron-builder --save-dev
修改package.json配置:
{
"build": {
"appId": "com.example.myapp",
"win": {
"target": "nsis",
"icon": "build/icon.ico"
},
"nsis": {
"oneClick": false, // 禁用一键安装
"allowToChangeInstallationDirectory": true
}
},
"scripts": {
"dist": "electron-builder --win"
}
}
3. 完整打包示例演示
3.1 基础打包命令
npm run dist
该命令会在dist目录生成:
- myapp-1.0.0.exe(便携版)
- myapp Setup 1.0.0.exe(安装程序)
- latest.yml(自动更新配置文件)
3.2 进阶配置示例
创建builder-config.js:
module.exports = {
extraResources: [
{
from: "assets/database", // 需要额外打包的静态资源
to: "data" // 安装后存放路径
}
],
nsis: {
include: "installer.nsh", // 自定义安装脚本
license: "LICENSE.txt" // 安装时显示的许可协议
}
};
在package.json中引入配置:
{
"build": {
"extends": null,
"extraFiles": "./builder-config.js"
}
}
4. NSIS高级定制开发
4.1 自定义安装页面
创建installer.nsh:
!define MUI_WELCOMEPAGE_TITLE "欢迎使用MyApp安装程序"
!define MUI_FINISHPAGE_RUN "$INSTDIR\MyApp.exe"
; 添加自定义安装类型选择页
!insertmacro MUI_PAGE_COMPONENTS
!insertmacro MUI_PAGE_DIRECTORY
!insertmacro MUI_PAGE_INSTFILES
Function .onInit
; 设置默认安装路径
StrCpy $INSTDIR "$PROGRAMFILES\MyCompany\MyApp"
FunctionEnd
Section "主程序" SecMain
SetOutPath "$INSTDIR"
File /r "dist\win-unpacked\*.*"
SectionEnd
Section "桌面快捷方式" SecShortcut
CreateShortcut "$DESKTOP\MyApp.lnk" "$INSTDIR\MyApp.exe"
SectionEnd
4.2 多语言支持配置
在package.json中添加:
{
"build": {
"nsis": {
"language": "zh_CN",
"multiLanguageInstaller": true
}
}
}
5. 应用分发场景分析
5.1 企业内部分发
- 局域网部署时需考虑离线安装包大小控制
- 使用自定义安装脚本实现静默安装参数:
MyAppSetup.exe /S /D=C:\Program Files\MyApp
5.2 在线更新机制
配置自动更新时需注意:
provider: generic
url: https://update-server.com/path
channel: latest
6. 技术方案对比评估
6.1 electron-builder优势
- 开箱即用的签名支持
- 自动生成delta更新包
- 支持Squirrel.Windows自动更新框架
6.2 NSIS核心优势
- 生成的可执行文件体积仅增加约200KB
- 脚本级安装流程控制
- 20年历史验证的稳定性
6.3 潜在问题清单
- 杀毒软件误报(需代码签名证书)
- 中文路径支持需特殊处理
- 旧版本覆盖安装时残留文件处理
7. 实战注意事项
7.1 安装包签名必须
使用signtool进行代码签名:
signtool sign /t http://timestamp.digicert.com /f mycert.pfx /p password "installer.exe"
7.2 路径处理规范
在Electron应用中应使用:
const userDataPath = app.getPath('userData')
7.3 版本管理策略
采用语义化版本控制:
{
"version": "2.1.0-beta.1",
"build": {
"publish": {
"provider": "github",
"releaseType": "draft"
}
}
}
8. 完整解决方案总结
通过electron-builder+NSIS组合,我们实现了从基础打包到企业级分发的完整链路。这种方案特别适合以下场景:
- 需要定制安装流程的商业软件
- 包含额外依赖项的中大型应用
- 有自动更新需求的桌面程序
- 需要控制安装包体积的交付场景
对于需要快速迭代的SAAS类应用,建议开启delta更新功能;而对于需要严格权限控制的政务类软件,则应强化安装过程中的UAC验证。