electron-builder打包与发布Electron应用

作者:组件花园时间:2026-11-01 05:18:32浏览:663

本文基于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.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-updater文档
  • electron-vite-vue模板仓库

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

作者最新文章