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 中设置。