使用 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 字段）

---

🚀 安装依赖

npm install -D electron-builder

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

"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 字段）

"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 发布

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

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

Generic 发布（静态服务器）

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

⚠️ 需手动上传构建产物

---

🔐 macOS 注意事项

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

---

🧪 调试建议

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

---

✅ 推荐实践流程

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

---

📚 延伸阅读

• electron-builder 官方文档
• electron-updater 文档
• electron-vite-vue 模板仓库