使用 electron-builder 打包与发布 Electron 应用

基于 electron-vite-vue 项目结构

本文将基于 electron-vite-vue 脚手架，详细介绍如何使用 electron-builder 实现：

✅ 多平台打包（Windows / macOS / Linux）
✅ 自动更新发布配置
✅ 常用构建脚本与输出结构

📁 项目结构

复制代码

electron-vite-vue/
├── electron/                 # 主进程代码
├── src/                      # 渲染进程代码（Vue）
├── dist/                     # 渲染构建输出（vite 自动生成）
├── dist-electron/           # 主进程和安装包构建输出
├── package.json              # 配置文件（包含 build 字段）

🚀 安装依赖

bash 复制代码

npm install -D electron-builder

electron-vite-vue 中已集成打包脚本（通常在 package.json 的 scripts 字段）：

json 复制代码

"scripts": {
  "dev": "electron-vite dev",
  "build": "electron-vite build",
  "build:dir": "electron-builder build",
  "build:win": "electron-builder --win",
  "build:mac": "electron-builder --mac"
}

⚙️ 基本构建配置（package.json 中的 build 字段）

json 复制代码

"build": {
  "appId": "com.example.app",
  "productName": "MyApp",
  "directories": {
    "output": "dist-electron"
  },
  "files": [
    "dist",
    "electron",
    "node_modules"
  ],
  "win": {
    "target": "nsis"
  },
  "mac": {
    "target": "dmg"
  },
  "publish": {
    "provider": "github",
    "owner": "yourname",
    "repo": "your-repo"
  }
}

📦 打包命令说明

命令	功能
`npm run build`	构建渲染进程 (Vite)
`npm run build:dir`	打包主进程和产物
`electron-builder --win`	构建 Windows 安装包
`electron-builder --mac`	构建 macOS DMG
`electron-builder -p never`	仅打包不发布
`electron-builder -p always`	打包并自动发布

📁 打包输出结构

输出目录通常为 dist-electron/，包含：

Windows:
- MyApp Setup 1.0.0.exe
- latest.yml
- blockmap（如启用增量更新）
macOS:
- MyApp-1.0.0.dmg
- latest-mac.yml

🔧 自动更新配置（publish）

GitHub 发布

json 复制代码

"publish": {
  "provider": "github",
  "owner": "yourname",
  "repo": "your-repo"
}

使用 GH_TOKEN 环境变量授权发布
发布内容包括 .exe/.dmg + .yml 文件

Generic 发布（静态服务器）

json 复制代码

"publish": {
  "provider": "generic",
  "url": "https://your-domain.com/updates/"
}

⚠️ 需手动上传构建产物

🔐 macOS 注意事项

签名/公证对于自动更新是必须的
推荐使用 Apple Developer ID + notarize 配合发布

🧪 调试建议

添加日志模块 electron-log
设置日志等级 autoUpdater.logger = log
可通过 --config 传入额外构建配置

✅ 推荐实践流程

设置 build 字段（含 publish）
执行渲染构建：npm run build
执行打包构建：npm run build:dir 或指定平台构建
上传产物到 GitHub Release 或服务器
应用中启用 electron-updater 自动更新逻辑

使用 electron-builder 打包与发布 Electron 应用

📁 项目结构

🚀 安装依赖

⚙️ 基本构建配置（package.json 中的 build 字段）

📦 打包命令说明

📁 打包输出结构

🔧 自动更新配置（publish）

GitHub 发布

Generic 发布（静态服务器）

🔐 macOS 注意事项

🧪 调试建议

✅ 推荐实践流程

📚 延伸阅读