需搭建支持Windows、macOS、Linux三端打包的Electron开发环境:安装Node.js≥18.17.1、npm≥9.6.0;初始化项目并锁定Electron 27;配置electron-builder多平台target及唯一appId;主进程按platform差异化设置窗口与API调用;最终验证三端安装包功能完整。

要在Windows系统上用Electron开发跨平台桌面应用,你得先搭建能同时产出Windows、macOS和Linux可执行文件的开发环境,而不是只让程序在本机跑起来就完事。
安装基础依赖并验证版本
打开PowerShell或CMD,依次执行以下命令:
node -v → 确保输出 v18.17.1 或更高版本(Electron 27要求Node.js 18.17.1);
npm -v → 输出必须 ≥ 9.6.0,否则后续electron-builder会报错;
【若npm版本过低,必须执行 npm install -g npm@latest 升级,旧版npm无法解析electron-builder v24+的peer依赖】。
初始化项目结构
新建文件夹,进入后运行:
npm init -y → 自动生成package.json;
npm install electron@27.0.0 --save-dev → 明确锁定Electron 27版本,避免自动升级到28(尚未发布)导致Chromium 119兼容问题;
在项目根目录创建main.js,粘贴官方最小主进程代码(含app.whenReady + BrowserWindow实例);
在同目录创建index.html,写入
Hello Electron
即可,无需CSS/JS引用。配置多平台打包工具
方法一:用electron-builder(推荐)
npm install electron-builder --save-dev;
在package.json中添加build字段,指定win、mac、linux三个target,并设置appId为com.example.myapp(【appId必须全局唯一,否则macOS签名失败且Windows卸载残留注册表项】);
添加scripts:"dist": "electron-builder"。
方法二:用electron-packager(轻量备用)
npm install electron-packager --save-dev;
执行 electron-packager . myapp --platform=win32 --arch=x64 --electron-version=27.0.0 --out=dist --overwrite → 只打Windows包;
如需三端,需重复执行三次,分别设--platform=win32/mac/linux,耗时长且无自动签名支持。
编写主进程逻辑以支撑跨平台行为
第一步:在main.js中判断当前平台
const platform = process.platform; // 返回 'win32' / 'darwin' / 'linux';
第二步:按平台差异化设置窗口参数
win32下必须启用frame: true(否则Windows任务栏缩略图失效),darwin下建议设置titleBarStyle: 'hidden'适配原生菜单栏;
第三步:调用系统API前加平台守卫
if (platform === 'win32') { app.setAppUserModelId('com.example.myapp') };这行防止Windows通知图标显示为未知程序;
第四步:文件路径拼接必须用path.join()而非字符串+,否则Linux/macOS下斜杠方向错误导致资源加载失败。
执行打包并验证产物
运行 npm run dist(基于electron-builder配置);
等待构建完成,检查dist/win-unpacked/resources/app.asar是否存在;
双击dist/myapp Setup 1.0.0.exe安装,观察是否能在开始菜单正常列出、卸载后无残留;
将dist/mac/myapp.app复制到macOS虚拟机中双击运行,确认窗口渲染、菜单栏、拖拽文件功能均正常;
将dist/linux/myapp-linux-x64/myapp解压后在Ubuntu WSL中执行./myapp,验证基础UI与Node.js fs模块读写能力。


















