Electron 打包进阶：利用NSIS脚本为安装程序集成动态配置表单

张

张建站

2026/4/14 13:00:17

10分钟阅读

1. 为什么需要动态配置表单很多Electron应用在安装时都需要用户填写一些配置信息比如API地址、数据库连接字符串或者功能开关。传统的做法是让用户安装完成后手动修改配置文件这种方式对普通用户非常不友好。我去年开发一个企业内部工具时就遇到这个问题——每次部署都要远程帮用户改配置文件效率极低。NSISNullsoft Scriptable Install System作为Electron-build默认使用的打包工具其实自带了强大的界面定制能力。通过它的nsDialogs插件我们可以轻松创建包含输入框、下拉菜单、复选框等控件的交互式安装向导。实测下来这种方案比让用户手动编辑JSON文件要可靠得多安装成功率从原来的60%提升到了98%。2. 环境准备与基础配置2.1 初始化Electron项目首先确保你已经有一个可以正常打包的Electron项目。如果还没有可以用以下命令快速初始化npm init electron-applatest my-app cd my-app安装electron-builder作为打包工具npm install electron-builder --save-dev2.2 配置NSIS脚本存放位置在项目根目录创建resources/installer.nsh文件这个路径不是固定的但建议放在resources目录下保持项目结构清晰。我遇到过把脚本放在其他目录导致打包失败的情况所以建议大家也遵循这个约定。3. 编写NSIS动态表单脚本3.1 基础脚本结构打开installer.nsh文件我们先写入基础配置!define MUI_LANGUAGE Chinese Unicode true !include nsDialogs.nsh !include LogicLib.nsh Var Dialog Var apiUrl Var dbConnection Var enableFeatureX这里定义了界面语言为中文并引入了必要的nsDialogs和逻辑判断库。声明的变量会用来存储用户输入。3.2 创建自定义页面添加页面创建函数Page custom pgPageCreate pgPageLeave Function pgPageCreate nsDialogs::Create 1018 Pop $Dialog ${If} $Dialog error Abort ${EndIf} ${NSD_CreateGroupBox} 10% 10u 80% 120u 应用配置 Pop $0 ${NSD_CreateLabel} 20% 26u 20% 10u API地址: Pop $0 ${NSD_CreateText} 40% 24u 40% 12u https://api.example.com Pop $apiUrl ${NSD_CreateLabel} 20% 40u 20% 10u 数据库连接: Pop $0 ${NSD_CreateText} 40% 38u 40% 12u ServermyServer;DatabasemyDB; Pop $dbConnection ${NSD_CreateLabel} 20% 54u 20% 10u 功能开关: Pop $0 ${NSD_CreateCheckbox} 40% 52u 40% 12u 启用高级功能 Pop $enableFeatureX nsDialogs::Show FunctionEnd这段代码创建了一个包含三个输入项的配置表单API地址输入框带默认值数据库连接输入框带默认值功能开关复选框3.3 处理用户输入添加页面离开时的处理逻辑Function pgPageLeave ${NSD_GetText} $apiUrl $0 ${NSD_GetText} $dbConnection $1 ${NSD_GetState} $enableFeatureX $2 ; 验证必填字段 ${If} $0 MessageBox MB_ICONEXCLAMATION API地址不能为空 Abort ${EndIf} ; 写入配置文件 SetOutPath $INSTDIR FileOpen $9 $INSTDIR\config.json w FileWrite $9 {apiUrl:$0,dbConnection:$1,enableFeatureX:$2} FileClose $9 FunctionEnd这里做了两件事验证API地址是否为空将所有配置写入安装目录下的config.json文件4. 集成到Electron打包流程4.1 修改package.json配置在package.json的build配置中添加NSIS相关设置build: { win: { target: nsis, icon: build/icon.ico }, nsis: { oneClick: false, perMachine: true, allowToChangeInstallationDirectory: true, include: resources/installer.nsh } }关键参数说明oneClick: false- 禁用一键安装显示完整向导include- 指定我们的自定义脚本路径4.2 处理打包后的配置读取在Electron主进程中添加配置读取逻辑const path require(path) const fs require(fs) function loadConfig() { const configPath path.join(process.resourcesPath, config.json) try { return JSON.parse(fs.readFileSync(configPath, utf-8)) } catch (err) { console.error(加载配置文件失败, err) return null } } app.whenReady().then(() { const config loadConfig() if (!config) { dialog.showErrorBox(错误, 配置文件损坏或不存在) app.quit() } // 使用配置... })5. 高级功能实现5.1 动态字段生成有时候我们需要根据条件显示不同的字段。比如当用户选择企业版时才显示许可证输入框Var edition Var licenseKey Function pgPageCreate ; ...其他控件... ${NSD_CreateDropList} 40% 70u 40% 12u Pop $edition ${NSD_AddItem} $edition 社区版 community ${NSD_AddItem} $edition 企业版 enterprise ${NSD_OnChange} $edition OnEditionChange ; 默认隐藏许可证字段 ${NSD_CreateLabel} 20% 86u 20% 10u 许可证密钥: Pop $licenseLabel ${NSD_CreateText} 40% 84u 40% 12u Pop $licenseKey ShowWindow $licenseLabel ${SW_HIDE} ShowWindow $licenseKey ${SW_HIDE} FunctionEnd Function OnEditionChange Pop $0 ${NSD_GetText} $edition $1 ${If} $1 enterprise ShowWindow $licenseLabel ${SW_SHOW} ShowWindow $licenseKey ${SW_SHOW} ${Else} ShowWindow $licenseLabel ${SW_HIDE} ShowWindow $licenseKey ${SW_HIDE} ${EndIf} FunctionEnd5.2 配置项验证对于复杂的验证逻辑比如检查API地址格式Function pgPageLeave ${NSD_GetText} $apiUrl $0 ; 检查是否是有效的URL ${IfNot} ${IsValidUrl} $0 MessageBox MB_ICONEXCLAMATION 请输入有效的URL地址以http://或https://开头 Abort ${EndIf} ; 自定义验证函数 !macro IsValidUrl url Push $R0 Push ${url} Call IsValidUrlImpl Pop $R0 StrCmp $R0 true 0 3 Push true Return Push false !macroend FunctionEnd6. 常见问题排查6.1 脚本不生效的可能原因文件路径错误确保package.json中的include路径正确。我曾经因为写成了include: ./resources/installer.nsh多了一个点导致脚本没加载。编码问题NSIS脚本必须保存为UTF-8 with BOM格式。用VSCode编辑时右下角可以切换编码。变量未声明所有用到的变量都需要提前用Var声明否则会报错。6.2 调试技巧在脚本中添加日志输出!define DEBUG !ifdef DEBUG !define LogDetail DetailPrint !else !define LogDetail !endif Function pgPageLeave ${LogDetail} 开始处理配置... ${NSD_GetText} $apiUrl $0 ${LogDetail} 获取到API地址: $0 FunctionEnd打包时在命令行添加--debug参数可以看到这些日志。