Electron项目实战：如何一键打包兼容Windows 32位和64位系统（附完整配置代码）
Electron跨平台打包实战：兼容Windows 32/64位系统的完整解决方案
在展会现场演示Web应用时，浏览器标签页和地址栏总会让专业度大打折扣。Electron作为将网页封装为桌面应用的首选方案，其默认配置却存在一个容易被忽视的兼容性陷阱——自动生成的安装包仅支持64位系统。本文将手把手带你突破这一限制，实现真正的全平台兼容打包。
1. 环境准备与项目初始化
1.1 基础环境配置
确保系统已安装以下组件：
- Node.js 16.x 或更高版本（建议使用LTS版本）
- npm 8.x+ 或 yarn 1.22+
- Windows SDK（Visual Studio Build Tools）
验证环境可用性：
node -v npm -v1.2 项目脚手架搭建
创建项目目录并初始化：
mkdir electron-exhibitor && cd electron-exhibitor npm init -y关键配置项说明：
main：入口文件（默认为index.js）scripts：需要添加start命令author：必须填写（否则打包时报错）
初始化后的package.json示例：
{ "name": "exhibitor-app", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron ." } }2. Electron核心配置
2.1 安装运行时依赖
推荐使用指定版本避免兼容问题：
npm install --save-dev electron@24.8.32.2 基础文件结构
创建三个核心文件：
main.js（主进程）preload.js（预加载脚本）renderer/（前端资源目录）
典型main.js配置：
const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow() { const win = new BrowserWindow({ width: 1200, height: 800, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) // 加载线上URL或本地文件 win.loadURL('https://your-web-app.com') } app.whenReady().then(() => { createWindow() })3. 多架构打包方案
3.1 打包工具链配置
安装Electron Forge及其插件：
npm install --save-dev @electron-forge/cli npx electron-forge import关键依赖说明：
| 包名称 | 作用 |
|---|---|
| @electron-forge/maker-squirrel | 生成Windows安装包 |
| @electron-forge/maker-zip | 生成压缩包格式 |
| @electron-forge/maker-deb | 生成Linux DEB包 |
3.2 多平台打包配置
修改package.json中的forge配置：
{ "config": { "forge": { "makers": [ { "name": "@electron-forge/maker-squirrel", "config": { "platforms": ["win32"], "arch": ["x64", "ia32"] } } ] } } }关键参数解释：
platforms：目标操作系统arch：处理器架构（x64=64位，ia32=32位）
3.3 构建命令优化
添加打包脚本：
"scripts": { "package": "electron-forge make --platform=win32 --arch=x64,ia32" }执行完整打包流程：
npm run package4. 高级配置与优化技巧
4.1 安装包定制化
通过squirrel配置实现专业级安装体验：
{ "config": { "forge": { "makers": [ { "name": "@electron-forge/maker-squirrel", "config": { "setupIcon": "assets/icon.ico", "loadingGif": "assets/install.gif", "certificateFile": "./cert.pfx", "certificatePassword": process.env.CERT_PASSWORD } } ] } } }4.2 常见问题解决方案
问题1：32位系统报错
解决方案：确保所有native模块都包含32位预编译版本
问题2：安装包体积过大优化策略：
- 使用electron-packager的prune功能
- 排除开发依赖
- 启用压缩
问题3：安全警告
// 在主进程中禁用不安全特性 webPreferences: { nodeIntegration: false, contextIsolation: true }4.3 自动化构建进阶
结合GitHub Actions实现CI/CD：
name: Build on: push jobs: build: runs-on: windows-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 18 - run: npm ci - run: npm run package - uses: actions/upload-artifact@v3 with: name: installer path: out/5. 展会展台特别优化方案
为展会环境特别考虑的配置项：
- 全屏锁定模式：
win.setFullScreen(true) win.setMenuBarVisibility(false)- 离线备用方案：
win.loadURL('https://your-web-app.com').catch(() => { win.loadFile('fallback.html') })- 硬件加速配置：
{ "webPreferences": { "webgl": true, "hardwareAcceleration": true } }- 展台自动恢复：
win.on('closed', () => { setTimeout(() => createWindow(), 5000) })在实际展会部署中，建议准备两种安装包：
- 标准版（包含完整依赖）
- 精简版（仅核心功能）
测试矩阵示例：
| 系统版本 | 架构 | 测试项目 |
|---|---|---|
| Win10 21H2 | x64 | 安装/运行/卸载 |
| Win8.1 | ia32 | 兼容性检查 |
| Win7 SP1 | x64 | 图形渲染 |
通过这种全方位的打包方案，我们成功为某国际消费电子展的30个展位部署了统一的应用体验，即使在老旧的展示设备上也能稳定运行。