Electron跨平台打包实战：轻松兼容Windows 32位与64位系统
1. 为什么需要兼容32位和64位Windows系统？
最近接手了一个展会项目的需求，客户要求把现有的网页应用打包成桌面程序。刚开始觉得用Electron打个包应该很简单，结果在实际操作中发现默认生成的安装包只支持64位系统。这问题可不小——展会现场的电脑五花八门，很多老设备还在用32位系统。要是用户打不开程序，那场面就尴尬了。
这里先科普下32位和64位的区别。简单来说，就像不同宽度的车道：32位系统相当于双向两车道，64位则是四车道。老旧的CPU和操作系统（比如Windows 7精简版）很多只支持32位，而现代电脑基本都是64位。Electron默认打包时只会生成当前运行环境的架构版本，这就是为什么很多开发者第一次打包出来的程序在32位电脑上会报错。
我在实际项目中遇到过更极端的情况：某次展会用的是一台十年前的触控一体机，连64位系统都装不上。幸好提前准备了32位版本，否则演示就直接泡汤了。这也让我意识到兼容性不是"可有可无"的功能，而是线下场景的刚需。
2. 从零开始搭建Electron项目
2.1 项目初始化踩坑实录
先新建项目文件夹，在命令行执行：
mkdir exhibition-app && cd exhibition-app npm init -y这里有个新手容易踩的坑：npm init时如果直接按回车跳过所有选项，打包时会报错。我建议至少填写这两个字段：
{ "author": "YourName", "description": "Exhibition Desktop App" }初始化完成后会生成package.json，我们需要手动添加main入口（后面会用到）：
{ "main": "main.js" }2.2 Electron安装的版本玄学
安装Electron时我强烈建议指定版本号，不同版本对32位的支持差异很大。经过多次测试，推荐使用这个命令：
npm install electron@14.2.3 --save-dev为什么是14.2.3？这是最后一个同时完美支持Win7/8/10的LTS版本，而且对32位系统的兼容性最好。最新版虽然功能多，但在老旧设备上容易出兼容性问题。
安装时可能会遇到网络问题，可以换淘宝镜像：
npm config set registry https://registry.npmmirror.com3. 核心配置文件详解
3.1 必须拥有的三个文件
在项目根目录创建这三个文件：
main.js（主进程）preload.js（预加载脚本）index.html（渲染进程）
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-website.com') // 或者本地测试用：win.loadFile('index.html') } app.whenReady().then(createWindow)3.2 package.json关键配置
在scripts中添加启动命令：
{ "scripts": { "start": "electron .", "package": "electron-forge package", "make": "electron-forge make" } }测试运行：
npm start如果看到窗口弹出并加载了网页，说明基础环境搭建成功。
4. 多平台打包实战
4.1 安装打包神器Electron Forge
比起官方的打包工具，Electron Forge对多平台支持更友好：
npm install --save-dev @electron-forge/cli npx electron-forge import这个命令会自动在package.json中添加必要的配置。过程中可能会询问是否安装某些依赖，全部选择Yes。
4.2 关键配置修改
在package.json中添加arch配置：
{ "config": { "forge": { "packagerConfig": { "arch": ["ia32", "x64"] } } } }ia32就是32位架构，x64对应64位。这样配置后会同时生成两个版本的安装包。
4.3 打包命令与输出
执行打包：
npm run make打包完成后会在out文件夹生成：
exhibition-app-win32-ia32（32位版本）exhibition-app-win32-x64（64位版本）
每个文件夹内都包含：
- 可执行文件（.exe）
- 安装程序（.msi）
- 免安装版（.zip）
5. 常见问题解决方案
5.1 安装包体积过大问题
默认打包会把整个Chromium引擎打包进去，导致安装包超过100MB。可以通过这些方式优化：
- 使用
electron-packager的prune选项：
npm install --save-dev electron-packager npx electron-packager . --prune- 移除无用依赖：
npm prune --production5.2 32位系统报错排查
如果32位程序无法运行，首先检查：
- 系统是否真的支持IA32架构（有些64位系统伪装成32位）
- 运行依赖是否完整（VC++运行库等）
- 尝试关闭杀毒软件（有些会误报）
5.3 展会环境特别注意事项
根据多次展会经验，建议：
- 准备两个版本的安装包
- 提前测试投影仪分辨率（修改
main.js中的窗口尺寸） - 禁用自动更新（避免现场网络差导致问题）
- 打包时包含离线资源（防止现场断网）
6. 进阶技巧：自动识别系统架构
对于高级用户，可以在代码中动态判断系统架构：
const os = require('os') const arch = os.arch() if(arch === 'ia32') { console.log('运行在32位系统') } else { console.log('运行在64位系统') }这样可以根据不同架构加载不同的资源或配置。比如32位系统内存有限，可以主动降低缓存大小：
const win = new BrowserWindow({ webPreferences: { partition: 'persist:exhibition', maximumMemory: arch === 'ia32' ? 512 : 2048 // 单位MB } })7. 最终检查清单
在交付前务必检查：
- 两个版本的安装包是否都能正常运行
- 程序图标是否显示正常
- 安装路径是否包含中文或空格（容易出问题）
- 杀毒软件是否误报（特别是32位版本）
- 现场演示用的所有功能是否都可用
打包完成后，建议用虚拟机测试不同版本的Windows系统。我常用的测试组合是：
- Windows 7 32位（最严苛环境）
- Windows 10 64位（主流环境）
- Windows 11 ARM版（特殊情况）