Electron+Vue项目实战：5分钟搞定electron-updater自动更新（含完整配置流程）

原创

于 2026-03-10 00:16:58 发布 · 638 阅读

标签

#Electron #electron-updater #自动更新 #Vue #ViewUI

Electron+Vue项目实战：5分钟搞定electron-updater自动更新（含完整配置流程）

最近在折腾一个桌面应用，用的是Electron和Vue。项目上线后，最头疼的就是每次修复bug或者加个新功能，都得让用户手动下载新安装包。用户嫌麻烦，我也嫌麻烦。后来发现，Electron官方推荐的electron-updater模块能完美解决这个问题，但网上的教程要么太零散，要么版本老旧，配置起来总踩坑。我花了不少时间，把整个流程摸透了，现在整理出一套最精简、最实用的配置方案。如果你也在用Electron+Vue，并且想快速给应用加上自动更新功能，跟着下面的步骤走，5分钟内就能搞定核心配置。

1. 环境准备与项目初始化

在开始配置自动更新之前，确保你的开发环境已经就绪。对于Electron+Vue项目，我强烈推荐使用vue-cli-plugin-electron-builder这个插件。它把Webpack配置、Electron主进程打包、以及不同平台的安装程序生成这些繁琐的工作都封装好了，让我们可以更专注于业务逻辑。

首先，检查你的项目结构。一个典型的Electron+Vue项目目录大概长这样：

your-project/
├── src/
│   ├── main/          # Electron主进程代码 (通常是background.js或main.js)
│   └── renderer/      # Vue渲染进程代码
├── package.json
└── vue.config.js      # Vue CLI配置文件

如果你的项目还没有集成Electron，可以快速初始化：

# 假设你已经有一个Vue项目
vue add electron-builder

选择你需要的Electron版本（比如最新的稳定版）。这个命令会自动帮你创建主进程文件（默认是src/background.js）并安装相关依赖。

接下来，安装自动更新的核心依赖——electron-updater：

npm install electron-updater --save
# 或者使用yarn
yarn add electron-updater

注意：electron-updater是electron-builder模块的一部分，通常已经随着vue-cli-plugin-electron-builder被安装了。但为了确保版本兼容性和功能完整，显式安装一次是稳妥的做法。请检查package.json中electron-builder的版本，建议使用较新的版本（如22.x以上），以获得更好的稳定性和功能支持。

2. 核心配置：构建与发布设置

自动更新的关键在于，构建工具需要知道把新版本的程序包发布到哪里，以及如何生成描述更新信息的元数据文件。这一切都在vue.config.js文件的electronBuilder配置项中完成。

打开（或创建）vue.config.js文件，在pluginOptions中添加或修改electronBuilder配置。下面是一个完整且实用的配置示例：

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // 应用ID，用于唯一标识你的应用，在更新时非常重要
        appId: 'com.yourcompany.yourapp',
        productName: '你的应用名',
        // 发布配置：这是自动更新的核心
        publish: [
          {
            provider: 'generic', // 使用最简单的HTTP/HTTPS服务器
            channel: 'latest',   // 更新通道
            url: 'https://your-update-server.com/path/to/releases/' // 更新文件存放的服务器地址
          }
        ],
        // Windows系统下的NSIS安装程序配置
        nsis: {
          oneClick: false, // 是否一键安装（推荐false，让用户有选择权）
          allowToChangeInstallationDirectory: true, // 允许用户选择安装目录
          createDesktopShortcut: true, // 创建桌面快捷方式
          createStartMenuShortcut: true,
          shortcutName: '你的应用名'
        },
        // 各平台应用图标配置
        mac: {
          icon: 'build/icons/icon.icns'
        },
        win: {
          icon: 'build/icons/icon.ico',
          target: [
            {
              target: 'nsis', // 目标安装包类型
              arch: ['x64']   // 架构，可选x64, ia32
            }
          ]
        },
        linux: {
          icon: 'build/icons'
        },
        // 生成额外的元数据文件，对自动更新至关重要
        generateUpdatesFilesForAllChannels: true
      }
    }
  }
}

这里有几个参数需要特别关注：

publish.url：这是新版本安装包和元数据文件（latest.yml, latest-mac.yml等）存放的服务器地址。可以是任何能通过HTTP/HTTPS访问的静态文件服务器，比如Nginx托管的目录、阿里云/腾讯云的对象存储（OSS/COS）、甚至GitHub Releases。确保这个地址在打包后和运行时都能被访问到。
appId

最低0.47元/天解锁文章