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

🧪 五、平台差异说明

🚚 六、自动更新（可选）

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

📌 总结

📎 附录：常见问题

❓白屏或路径错误

请使用 file:// 或 __dirname 动态路径拼接加载本地资源。

❓打包时提示找不到主入口

确保 main.js 路径正确，且 main 字段已在 package.json 中设置。