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

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

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

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

---

一、环境准备

• 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 为例）

1. 在 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 等参数。

2. 在 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 = log
  autoUpdater.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 = true
  this.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.latestVersion
    const downloadUrl = res.data.downloadUrl
    const releaseNotes = res.data.releaseNotes

    const localVersion = '1.0.0' // 可以从 package.json 或 app.getVersion() 获得
    if (this.compareVersion(remoteVersion, localVersion) > 0) {
      // 有新版本
      this.showUpdateModal = true
      this.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] || 0
      const b = arr2[i] || 0
      if (a > b) return 1
      if (a < b) return -1
    }
    return 0
  }
}

第三步：下载并安装

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

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

方式 2：Electron内下载并执行

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

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

   const fs = require('fs')
   const path = require('path')
   const { shell } = require('electron') // 如果在渲染进程，要启用 nodeIntegration
   
   async 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)
     // 这里也可以先弹窗告诉用户 "正在打开安装包，请在向导中确认完成更新"
   }

2. 用户安装并重启

   • 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. 安装完重启

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

---

结尾

至此，我们介绍了 Electron + Vue 应用在线更新的两种思路：

1. 自动更新 (autoUpdater + electron-builder)：最常用、最省事、用户体验好。
2. 手动更新（自定义下载 + 安装）：逻辑自主可控，但需要用户多一步操作。

只要根据你的项目需求来选取合适方案，并按文中步骤配置或编写相应代码，就能让你的Electron桌面程序具备友好的在线升级能力。希望本文能帮到你，祝开发顺利！