本文基于electron-vite-vue脚手架,详解使用electron-builder进行Windows、macOS和Linux多平台打包的方法。涵盖基础构建配置、GitHub与Generic发布策略、自动更新配置及macOS签名公证要求,提供完整的调试建议与推荐实践流程。
本文基于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.exelatest.ymlblockmap(如启用增量更新)
- macOS:
MyApp-1.0.0.dmglatest-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传入额外构建配置
✅ 推荐实践流程
- 设置
build字段(含publish) - 执行渲染构建:
npm run build - 执行打包构建:
npm run build:dir或指定平台构建 - 上传产物到GitHub Release或服务器
- 应用中启用
electron-updater自动更新逻辑
📚 延伸阅读
- electron-builder官方文档
- electron-updater文档
- electron-vite-vue模板仓库
到此这篇关于electron-builder打包与发布Electron应用的文章就介绍到这了,更多相关electron-builder打包与发布Electron内容请搜索本站以前的文章或继续浏览下面的相关文章,希望大家以后多多支持本站!