electron-builder打包与发布Electron应用

 更新时间:2025年05月28日 09:11:35   作者:黑匣子~  
使用electron-builder基于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 传入额外构建配置

✅ 推荐实践流程

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

📚 延伸阅读

到此这篇关于electron-builder打包与发布Electron应用的文章就介绍到这了,更多相关electron-builder打包与发布Electron内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • 问题解析有JSDoc还需要TypeScript吗

    问题解析有JSDoc还需要TypeScript吗

    这篇文章主要介绍了有JSDoc还需要TypeScript的问题示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • JavaScript中运算符与数组扩展详细讲解

    JavaScript中运算符与数组扩展详细讲解

    这篇文章主要介绍了JavaScript中运算符与数组扩展方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • JS判断Android、iOS或浏览器的多种方法(四种方法)

    JS判断Android、iOS或浏览器的多种方法(四种方法)

    这篇文章主要介绍了JS判断Android、iOS或浏览器的多种方法(四种方法),需要的朋友可以参考下
    2017-06-06
  • uni-app app引入天地图简单代码示例

    uni-app app引入天地图简单代码示例

    uni-app是一种基于Vue.js的跨平台开发框架,允许开发者使用统一的代码编写多端应用,这篇文章主要给大家介绍了关于uni-app app引入天地图的相关资料,需要的朋友可以参考下
    2024-02-02
  • JavaScript获取css行间样式,内连样式和外链样式的简单方法

    JavaScript获取css行间样式,内连样式和外链样式的简单方法

    下面小编就为大家带来一篇JavaScript获取css行间样式,内连样式和外链样式的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript数组去重的五种方法及其他细节和拓展

    JavaScript数组去重的五种方法及其他细节和拓展

    JavaScript数组去重这个问题,经常出现在面试题中,下面这篇文章主要给大家介绍了关于JavaScript数组去重的五种方法及其他细节和拓展的相关资料,文中通过实例代码以及图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 详解TypeScript中type与interface的区别

    详解TypeScript中type与interface的区别

    在写 ts 相关代码的过程中,总能看到 interface 和 type 的身影。它们的作用好像都一样的,相同的功能用哪一个都可以实现,也都很好用,所以也很少去真正的理解它们之间到底有啥区别,因此本文将详细讲解二者的区别,需要的可以参考一下
    2022-04-04
  • 小程序Request的另类用法详解

    小程序Request的另类用法详解

    这篇文章主要介绍了小程序Request的另类用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 使用SpreadJS快速清除Excel中工作表保护密码

    使用SpreadJS快速清除Excel中工作表保护密码

    这篇文章主要为大家介绍了使用SpreadJS快速清除Excel中工作表保护密码方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • js学习笔记之class类、super和extends关键词

    js学习笔记之class类、super和extends关键词

    es6提供了一个新语法就是class,下面这篇文章主要给大家介绍了关于js学习笔记之class类、super和extends关键词的相关资料,需要的朋友可以参考下
    2021-08-08

最新评论