vue-cli-plugin-electron-builder 项目实用指南：从自动更新到多平台构建

vue-cli-plugin-electron-builder 项目实用指南：从自动更新到多平台构建

【免费下载链接】vue-cli-plugin-electron-builder Easily Build Your Vue.js App For Desktop With Electron 项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli-plugin-electron-builder

前言

本文将深入探讨 vue-cli-plugin-electron-builder 插件在实际开发中的几个关键应用场景。这个插件能够帮助开发者轻松地将 Vue.js 应用打包为跨平台的桌面应用程序。我们将从自动更新功能开始，逐步介绍图标定制、多页面应用开发、VSCode 调试技巧，最后讲解如何实现多平台构建。

自动更新功能实现

准备工作

首先需要安装 electron-updater 依赖包：

yarn add electron-updater
# 或者
npm install electron-updater

配置自动更新

在 vue.config.js 中配置 electron-builder 的发布选项：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        publish: ['github']
      // 这里配置发布到GitHub平台
      }
    }
  }
}

主进程集成

在 background.js 或 background.ts 主进程文件中添加自动更新逻辑：

import { autoUpdater } from "electron-updater"

// 在应用启动时检查更新
if (!process.env.WEBPACK_DEV_SERVER_URL) {
  autoUpdater.checkForUpdatesAndNotify()
}

发布流程

1. 设置 GitHub 个人访问令牌为环境变量
2. 构建应用时添加 -p always 参数自动上传
3. 在 GitHub 发布页面发布新版本
4. 用户端应用会自动检测并提示更新

注意：每次更新需要递增 package.json 中的版本号。

应用图标定制

electron-builder 会自动处理应用图标，只需按照规范放置文件即可：

1. 在项目根目录创建 build/icons 文件夹
2. 将主图标命名为 icon.png 放在该目录下
3. electron-builder 会自动为不同平台生成适配的图标

最佳实践：准备 512x512 像素的 PNG 图标以获得最佳效果。

多窗口应用开发

基础配置

1. 首先按照 Vue CLI 的方式配置多页面
2. 在主进程文件中声明多个窗口变量
3. 改造 createWindow 函数使其支持多页面参数

窗口管理示例

// 创建主窗口
win = createWindow('', 'index.html')
// 创建子窗口
secondWin = createWindow('subpage', 'subpage.html')

macOS 特殊处理

在 macOS 上需要特别处理 Dock 图标点击事件：

app.on('activate', () => {
  if (win === null) win = createWindow('', 'index.html')
  if (secondWin === null) secondWin = createWindow('subpage', 'subpage.html')
})

VSCode 调试配置

准备工作

1. 在 vue.config.js 中启用 sourcemap
2. 创建 .vscode/tasks.json 配置调试任务
3. 设置 .vscode/launch.json 调试配置

调试技巧

1. 使用 Electron: All 配置同时调试主进程和渲染进程
2. 首次启动时渲染进程断点可能不生效，需要重新加载窗口
3. 可以利用 VSCode 的条件断点等高级调试功能

调试配置要点：

• 主进程使用 Node.js 调试协议
• 渲染进程使用 Chrome 调试协议
• 确保 sourcemap 配置正确

多平台构建策略

electron-builder 支持为不同平台构建应用：

基本命令

# 构建 Linux .deb 和 Windows NSIS 安装包
yarn electron:build --linux deb --win nsis

# 使用 npm 的等效命令
npm run electron:build -- --linux deb --win nsis

平台支持

可构建的平台包括：

• Windows (win)
• macOS (mac)
• Linux (linux)

每种平台支持多种打包格式，如：

• Windows: nsis, portable, appx 等
• macOS: dmg, pkg, mas 等
• Linux: deb, rpm, snap 等

构建优化建议

1. 考虑使用 CI/CD 系统进行多平台构建
2. 对于不常用的平台，可以按需构建减少构建时间
3. 测试构建结果时使用对应平台的虚拟机或真机

结语

通过本文介绍的各种技巧，开发者可以充分利用 vue-cli-plugin-electron-builder 插件构建功能完善、用户体验良好的跨平台 Electron 应用。从自动更新到多窗口管理，从便捷调试到多平台构建，这些功能组合使用可以显著提升开发效率和产品质量。

【免费下载链接】vue-cli-plugin-electron-builder Easily Build Your Vue.js App For Desktop With Electron 项目地址: https://gitcode.com/gh_mirrors/vu/vue-cli-plugin-electron-builder