Electron + Vue 项目如何实现软件在线更新

本文主要介绍两种常见的更新思路：

自动更新（autoUpdater / electron-updater 方式）
手动更新（自定义下载 + 安装包）

通过对比，你可以选择最适合自己项目的方案，也可以组合使用。

一、环境准备

Electron + Vue 项目结构（一般使用 electron-builder、vue-cli-plugin-electron-builder 或类似脚手架）
对 npm、Electron、Vue、Node.js 基本知识有一定了解
能够将 Electron 应用打包（生成 .exe / .dmg / .AppImage 等安装包）

如果你还没完成打包，请先确保“可以通过命令 electron-builder build”或相应脚本，成功得到可安装运行的产品包。

二、自动更新方式：使用 electron-updater

1. 原理概述

electron-builder 提供的 electron-updater 模块，会在应用启动时自动检查指定的更新服务器（如 GitHub Releases、S3、自定义服务等）。如果检测到新版本，Electron 会在后台下载增量或全量更新包，完成后提示用户“重启并更新”。整个流程对用户来说非常简便。

2. 配置打包（以 GitHub Releases 为例）

在 package.json 或 electron-builder.yml 中指定发布信息：
```
{"name": "my-electron-app","version": "1.0.0","build": {"publish": [{"provider": "github","owner": "你的GitHub用户名","repo": "你的仓库名"}]}
}
```
- provider: "github"：表示自动更新将从该 GitHub 项目 Releases 获取更新信息。
- owner、repo：对应你在 GitHub 上的用户名和仓库名称。
- 若要使用 S3 或自定义服务器，可以将 "provider" 改成 "generic" / "s3" / "spaces" 等，并提供 url / bucket 等参数。
在 GitHub 仓库中发布新版本
- 当你更新版本号并打包后，会生成如 v1.1.0.exe、latest.yml 等文件；你需要将它们上传到 GitHub Releases 的新版本发布页。
- electron-updater 会自动去获取最新的 Release 并对比版本号。

3. 代码实现：主进程中使用 autoUpdater

在 main.js（或 background.js）里引入并初始化：

const { app, BrowserWindow } = require('electron')
const { autoUpdater } = require('electron-updater')
const log = require('electron-log')function createWindow() {// 创建并加载你的 Vue 页面const mainWin = new BrowserWindow({ /* ... */ })// mainWin.loadURL('file://...') 或 http://localhost:8080
}function initAutoUpdater() {// 输出日志到文件，以便排查autoUpdater.logger = logautoUpdater.logger.transports.file.level = 'info'// 检查更新autoUpdater.checkForUpdatesAndNotify()// 监听事件：发现更新autoUpdater.on('update-available', (info) => {log.info('有新版本可用:', info.version)// 你也可以通过 IPC 通知渲染进程，弹出提示})// 监听事件：下载中autoUpdater.on('download-progress', (progress) => {log.info(`下载进度: ${progress.percent}%`)})// 监听事件：更新已下载autoUpdater.on('update-downloaded', (info) => {log.info('更新下载完成，将在重启后应用')// 你可以在这儿自动或让用户选择后再执行:// autoUpdater.quitAndInstall()})autoUpdater.on('error', (err) => {log.error('自动更新出错:', err)})
}app.whenReady().then(() => {createWindow()initAutoUpdater()
})

当应用检测到新版本，会在后台下载。下载完成后，默认会在下一次应用重启时安装，也可用 autoUpdater.quitAndInstall() 立即重启并安装。
生产环境下（你安装了打包好的 .exe / .dmg），应用启动时才会真正进行自动更新检测。开发模式下通常不会执行这个流程，或者检测不到更新。

4. 在渲染进程（Vue）中显示更新状态

若你想让前端 Vue 界面中有个“检查更新”按钮或进度条，可以通过 IPC 让主进程把事件信息发送给渲染进程。例如：

// main.js 主进程
autoUpdater.on('update-available', (info) => {mainWindow.webContents.send('update-available', info)
})

// 在 Vue 里 (渲染进程)
import { ipcRenderer } from 'electron'ipcRenderer.on('update-available', (event, info) => {this.showUpdateModal = truethis.newVersionInfo = info
})

这样，你就能在页面里提示用户“检测到新版本 vX.X.X”。其他事件同理。

三、手动更新方式：自定义下载 + 安装（推荐，可控性更强）

有些项目或团队希望完全掌控更新过程，不依赖 electron-updater，或者只在内网环境下分发安装包。这时可以采用手动更新思路。

1. 思路概述

你在服务器上维护一个简单的“版本信息”接口（或文件），例如 latest-version.json，内容包括：

{"latestVersion": "1.2.0","downloadUrl": "https://yourserver.com/myApp-1.2.0.exe","releaseNotes": "1. 优化登录流程\n2. 修复了若干bug"
}

Vue 前端启动后请求这个接口，对比当前应用版本，若发现有新版本就提示用户。
如果用户选择更新，就下载新的安装包（.exe / .dmg / .zip 等）。下载成功后，提示用户手动安装或由 Electron 打开安装包进行覆盖安装。

2. 详细步骤

第一步：提供最新版本信息

在任意服务器（或网盘）上放置一个 latest-version.json 文件，也可以是后端 API 返回类似结构。你只需确保应用能够访问到它。

示例：

{"latestVersion": "1.2.0","downloadUrl": "https://yourserver.com/downloads/myApp-1.2.0.exe","releaseNotes": "1. 优化了登录流程\n2. 修复了若干bug"
}

第二步：Vue 前端检查更新

在渲染进程中写一个方法 checkUpdate()：

// 假设这是 Vue 组件里:
methods: {async checkUpdate() {const res = await axios.get('https://yourserver.com/latest-version.json')const remoteVersion = res.data.latestVersionconst downloadUrl = res.data.downloadUrlconst releaseNotes = res.data.releaseNotesconst localVersion = '1.0.0' // 可以从 package.json 或 app.getVersion() 获得if (this.compareVersion(remoteVersion, localVersion) > 0) {// 有新版本this.showUpdateModal = truethis.updateInfo = {remoteVersion,downloadUrl,releaseNotes}} else {alert('已是最新版本!')}},compareVersion(v1, v2) {// 简易的版本号比较函数const arr1 = v1.split('.').map(num => parseInt(num, 10))const arr2 = v2.split('.').map(num => parseInt(num, 10))for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {const a = arr1[i] || 0const b = arr2[i] || 0if (a > b) return 1if (a < b) return -1}return 0}
}

第三步：下载并安装

方式 1：让用户通过浏览器下载

最简单的做法：在弹窗里放一个下载链接 <a :href="downloadUrl">下载新版</a>，用户点击后浏览器会下载该安装包。下载完成后，用户手动双击即可安装覆盖。

方式 2：Electron内下载并执行

如果希望在 Electron 内部自动下载，再执行安装程序：

主进程或渲染进程 用 Node.js 模块下载文件。示例（渲染进程内可用 axios + fs，需在 Vue 项目里启用 Node 接口或在主进程中完成）：这种方法太过于莽，存在安全风险，建议使用preload的方式安全使用node文件系统！

const fs = require('fs')
const path = require('path')
const { shell } = require('electron') // 如果在渲染进程，要启用 nodeIntegrationasync function downloadAndInstall(url) {// 1. 下载const response = await axios.get(url, { responseType: 'arraybuffer' })const installerPath = path.join(require('os').tmpdir(), 'myApp-1.2.0.exe')fs.writeFileSync(installerPath, response.data)// 2. 打开安装包 (Windows上会执行 .exe 安装向导)shell.openPath(installerPath)// 这里也可以先弹窗告诉用户 "正在打开安装包，请在向导中确认完成更新"
}

用户安装并重启
- Windows 上执行 .exe 或 .msi 安装向导后，会覆盖原安装目录或让用户选择新目录；
- macOS 上执行 .dmg / .pkg，同理需要手动拖拽或安装；
- 安装完成后，旧的进程要么自动退出，要么需要用户手动退出，然后重新打开新版本即可。

这样，你就实现了“自定义更新流程”：前端检测 -> 下载 -> 打开安装包 -> 覆盖安装 -> 用户重启。

四、两种方式的对比

方面	自动更新(electron-updater)	手动更新(自定义下载)
适用场景	大多数常见的 Electron 桌面应用，需要自动检查/下载/无缝更新	内网环境、对自动更新可控性要求高、或想保留更多用户操作自由
更新体验	一键式后台下载 + 重启生效，几乎无额外操作	用户手动下载并安装，或 Electron 打开安装包；操作步骤略多
实现难度	配置 `publish` & 写几行 `autoUpdater` 代码即可	需要自己管理版本接口、编写下载逻辑、处理安装后覆盖等
打包要求	通常需要使用 `nsis` / `dmg` 并发布到 GitHub / S3 / 服务器	无特殊限制，只要你能提供安装包下载地址即可
增量/全量更新	electron-updater 可自动处理差分包（macOS delta, nsis diff）	通常只能下载完整安装包，体积较大
可控性	更新流程自动化较强，可定制的地方有限	完全掌控逻辑，UI、下载行为、安装流程都可自行定义
团队协作	对多数开发者更友好，官方支持、维护方便	需自行编写/维护更新服务逻辑，适合对流程有特殊要求的团队

五、总结

对于一般 Electron+Vue 桌面应用，优先推荐使用 electron-updater 自动更新，配置简单、用户体验好。你只要做好打包发布，即可让应用在后台检测并自动下载安装包。
如果不方便使用 autoUpdater（如：内网环境，或需要自定义下载逻辑），你可以手动更新：
1. 前端拉取服务器的版本信息
2. 检测到新版本后弹窗提示
3. 让用户自行下载 .exe / .dmg / .zip
4. 下载完成后引导安装或 Electron 内部直接执行安装包
5. 安装完重启

两种方案都能达成“让用户轻松获取新版本”的目标，只是在自动化程度和实现细节上不同。你可以根据项目需求、团队习惯、用户使用场景，选择或结合使用。