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

1. 将构建产物上传到 GitHub Releases
2. 发布 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 中设置。