Electron应用MSI安装时如何获取用户输入参数写入config.json

核心思路 #

借助electron-builder基于Wix的MSI构建能力，通过自定义Wix UI对话框收集用户输入，再通过安装后脚本将参数写入应用目录的config.json。

步骤1：配置Wix自定义输入对话框 #

在项目根目录创建installer文件夹，新建custom-ui.wxs文件，添加自定义对话框代码：

<?xml version="1.0" encoding="UTF-8"?>
<Wix xmlns="http://schemas.microsoft.com/wix/2006/wi">
  <Fragment>
    <!-- 定义存储用户输入的属性 -->
    <Property Id="APP_URL" Secure="yes" />
    <Property Id="APP_IP" Secure="yes" />

    <!-- 自定义配置对话框 -->
    <UI>
      <Dialog Id="CustomInputDialog" Width="370" Height="270" Title="应用配置">
        <Control Id="Next" Type="PushButton" X="236" Y="243" Width="56" Height="17" Default="yes" Text="!(loc.WixUINext)" />
        <Control Id="Back" Type="PushButton" X="180" Y="243" Width="56" Height="17" Text="!(loc.WixUIBack)" />
        <Control Id="Cancel" Type="PushButton" X="304" Y="243" Width="56" Height="17" Cancel="yes" Text="!(loc.WixUICancel)">
          <Publish Event="SpawnDialog" Value="CancelDlg">1</Publish>
        </Control>

        <!-- URL输入项 -->
        <Control Id="URLLabel" Type="Text" X="20" Y="60" Width="100" Height="15" Text="服务器URL:" />
        <Control Id="URLInput" Type="Edit" X="120" Y="57" Width="220" Height="18" Property="APP_URL" />

        <!-- IP输入项 -->
        <Control Id="IPLabel" Type="Text" X="20" Y="90" Width="100" Height="15" Text="服务器IP:" />
        <Control Id="IPInput" Type="Edit" X="120" Y="87" Width="220" Height="18" Property="APP_IP" />
      </Dialog>

      <!-- 将自定义对话框插入安装流程 -->
      <Publish Dialog="WelcomeDlg" Control="Next" Event="NewDialog" Value="CustomInputDialog">1</Publish>
      <Publish Dialog="CustomInputDialog" Control="Back" Event="NewDialog" Value="WelcomeDlg">1</Publish>
      <Publish Dialog="CustomInputDialog" Control="Next" Event="NewDialog" Value="LicenseAgreementDlg">1</Publish>
    </UI>
  </Fragment>
</Wix>

步骤2：修改electron-builder配置 #

在项目package.json的build字段中，指定Wix自定义片段和安装后脚本：

{
  "build": {
    "win": {
      "target": "msi",
      "icon": "build/icon.ico"
    },
    "msi": {
      "wixExtraDeps": ["./installer/custom-ui.wxs"],
      "wixAdditionalWixObjects": ["CustomInputDialog"],
      "script": "./installer/post-install.js"
    }
  }
}

步骤3：编写安装后写入脚本 #

在installer文件夹下创建post-install.js，读取Wix传递的参数并写入config.json：

const fs = require('fs');
const path = require('path');

// 获取安装目录和用户输入的参数
const installDir = process.env['INSTALLDIR'];
const appUrl = process.env['APP_URL'];
const appIp = process.env['APP_IP'];

if (!installDir) {
  console.error('未获取到安装目录');
  process.exit(1);
}

// 适配你的项目config.json路径，此处假设在resources/app下
const configPath = path.join(installDir, 'resources', 'app', 'config.json');

// 写入配置内容
const configContent = JSON.stringify({
  serverUrl: appUrl,
  serverIp: appIp
}, null, 2);

try {
  fs.writeFileSync(configPath, configContent);
  console.log('配置文件写入成功');
} catch (err) {
  console.error('写入配置文件失败:', err);
  process.exit(1);
}

关键注意事项 #

• 确保config.json的路径与你的项目打包结构匹配，若使用asar打包，需将config.json排除在asar包外，或调整脚本路径。
• Wix属性必须设置Secure="yes"，否则参数无法传递到安装后脚本。
• 测试MSI时需以管理员权限运行，避免文件写入权限问题。

内容的提问来源于stack exchange，提问作者Atakan Aydınbaş