electron-builder打包与发布Electron应用
本文将基于 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应用的文章就介绍到这了,更多相关electron-builder打包与发布Electron内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
- Electron 使⽤ electron-builder 打包应用过程详解
- 使用electron-builder将项目打包成桌面程序的详细教程
- vue配置electron使用electron-builder进行打包的操作方法
- electron-builder打包vue2项目问题总结
- 快速解决electron-builder打包时下载依赖慢的问题
- vue项目使用electron-builder库打包成桌面程序的过程
- electron-builder打包exe后白屏的解决方法
- electron-builder 的基本使用及electron打包步骤
- vite + electron-builder 打包配置详解
- electron-builder打包配置详解
- Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
相关文章
JS判断Android、iOS或浏览器的多种方法(四种方法)
这篇文章主要介绍了JS判断Android、iOS或浏览器的多种方法(四种方法),需要的朋友可以参考下2017-06-06
JavaScript获取css行间样式,内连样式和外链样式的简单方法
下面小编就为大家带来一篇JavaScript获取css行间样式,内连样式和外链样式的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-07
详解TypeScript中type与interface的区别
在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影。它们的作用好像都一样的,相同的功能用哪一个都可以实现,也都很好用,所以也很少去真正的理解它们之间到底有啥区别,因此本文将详细讲解二者的区别,需要的可以参考一下2022-04-04
js学习笔记之class类、super和extends关键词
es6提供了一个新语法就是class,下面这篇文章主要给大家介绍了关于js学习笔记之class类、super和extends关键词的相关资料,需要的朋友可以参考下2021-08-08


最新评论