Electron 打包与发布指南：让你的应用运行在 Windows、macOS、Linux
🚀 Electron 打包与发布指南：让你的应用运行在 Windows、macOS、Linux
使用 Electron 开发桌面应用只是第一步，最终我们还需要将应用打包成用户可运行的可执行文件（如
.exe、.dmg、.AppImage），并能在各平台上正常安装运行。本篇将手把手教你实现跨平台打包与发布。
🧰 一、准备工作
📦 安装 Node.js
访问 https://nodejs.org/ 下载并安装最新版 Node.js，并确保 npm 可用：
node -v
npm -v
⚙️ 安装依赖
假设你已有一个基于 Electron 的项目结构：
npm install --save-dev electron electron-builder
🏗️ 二、配置 package.json
在 package.json 中添加如下字段：
{"name": "my-electron-app","version": "1.0.0","main": "public/main.js", "scripts": {"dev": "electron .","build": "electron-builder"},"build": {"appId": "com.example.electronapp","productName": "MyElectronApp","files": ["dist/**/*","public/**/*","node_modules/**/*","package.json"],"directories": {"output": "build"},"win": {"target": "nsis"},"mac": {"target": "dmg"},"linux": {"target": "AppImage"}},"devDependencies": {"electron": "^27.0.0","electron-builder": "^24.0.0"}
}
🛠️ 三、构建前准备
如果你是使用 Vue/React 等前端框架开发 UI：
npm run build # Vue/React 的构建命令
确保构建结果（如 dist/）已准备好，并在 main.js 中正确引用：
win.loadFile('dist/index.html');
📦 四、打包应用
使用如下命令打包项目：
npm run build
执行完后，会在 build/ 目录下生成对应平台的可执行文件：
- Windows：
MyElectronApp Setup.exe - macOS：
MyElectronApp.dmg - Linux：
MyElectronApp.AppImage
🧪 五、平台差异说明
| 平台 | 格式 | 工具 | 说明 |
|---|---|---|---|
| Windows | .exe 安装包 | NSIS | 可安装，支持快捷方式、卸载 |
| macOS | .dmg | DMG | 拖拽安装 |
| Linux | .AppImage / .deb | AppImage / Snap | 可直接运行或打包成发行版 |
🚚 六、自动更新（可选）
Electron Builder 支持自动更新，但需使用服务器（如 GitHub Releases、私有 CDN）来托管更新文件。
添加如下配置：
"publish": [{"provider": "github","owner": "your-github-name","repo": "your-repo-name"}
]
在主进程中监听更新：
const { autoUpdater } = require('electron-updater');app.whenReady().then(() => {autoUpdater.checkForUpdatesAndNotify();
});
🌐 七、发布你的应用
GitHub Releases
- 将构建产物上传到 GitHub Releases
- 发布 release 版本，供用户下载安装
其他发布平台：
- 自建服务器/CDN
- 使用 Snap Store（Linux）
- 使用 Microsoft Store / Mac App Store（需额外签名与配置）
🔐 八、平台签名与 notarization（推荐）
Windows 签名
需要购买代码签名证书（如 DigiCert）：
electron-builder build --win --csc-link cert.pfx --csc-key-password yourpassword
macOS notarization（苹果要求）
注册 Apple Developer 账号，使用 Xcode 或 notarize 工具进行签名上传：
electron-builder build --mac --publish always
📌 总结
| 步骤 | 内容 |
|---|---|
| 准备 | 安装 Electron + electron-builder |
| 配置 | package.json 添加 build 字段 |
| 打包 | npm run build 生成可执行文件 |
| 发布 | 上传 GitHub / 服务器 / 应用商店 |
| 更新 | 使用 electron-updater 自动更新 |
| 安全 | 平台签名，确保可信任和合规性 |
📎 附录：常见问题
❓白屏或路径错误
请使用 file:// 或 __dirname 动态路径拼接加载本地资源。
❓打包时提示找不到主入口
确保 main.js 路径正确，且 main 字段已在 package.json 中设置。