electron-vue项目自动更新解决方案（附代码）

ゝ一纸荒年。 2022-12-01 14:10 721阅读 0赞

electron-vue的创建过程这里不再赘述。相信已经搜索到这篇文章的你，已经完成了这个过程，下面我们进入正题

### 前言 ###

如果您的electron版本还是2.xx版本，需要更新electron版本，更新方式戳这里[https://blog.csdn.net/weixin\_43272648/article/details/104339699][https_blog.csdn.net_weixin_43272648_article_details_104339699]

### 第一步，安装electron-updater依赖 ###

npm install electron-updater --save

### 第二步，配置package.json文件 ###

在package.json中build配置项下边添加如下代码

"build": {
        ...
    
        "publish": [
          {
            "provider": "generic",
            "url": "http://localhost:8080/package" // 这里是存放.exe和latest.yml文件的地址
          }
        ],
        
        ...
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70][]

### 第三步，新建更新文件 ###

创建/src/main/model/update.js 文件，model这个文件夹初始是没有的，可以自己创建

/**
     * @description 执行自动更新检查
     * @author: hruomei
     * @update 暂无
     * @date: 2020-08-24 17:09:32
     */
    
    const { ipcMain } = require('electron')
    const { autoUpdater } = require("electron-updater")
    const { build } = require("../../../package.json")
    
    // 用户反馈立即更新
    ipcMain.on('ev-update-now', () => {
        console.log('ev-update-now::: 用户同意更新，开始更新') 
    
        autoUpdater.quitAndInstall()
    })
    
    // 用户也可以通过点击按钮去检测更新
    ipcMain.on('ev-check-for-update', () => {
        console.log('ev-check-for-update::: 执行自动更新检查') 
    
        autoUpdater.checkForUpdates()
    })
    
    function handleUpdate(mainWindow) {
        const message = {
            error: '检查更新出错',
            checking: '正在检查更新……',
            updateAva: '检测到新版本，正在下载……',
            updateNotAva: '现在使用的就是最新版本，不用更新'
        }
    
        autoUpdater.setFeedURL(build.publish[0].url) // 设置下载地址
    
        // 检查更新出错
        autoUpdater.on('error', () => {
            console.log('autoUpdater-error:::', arguments)
    
            sendUpdateMessage(message.error)
        })
    
        // 检查是否有版本更新
        autoUpdater.on('checking-for-update', () => {
            console.log('checking-for-update:::', arguments)
    
            sendUpdateMessage(message.checking)
        })
    
        // 检测到有版本更新
        autoUpdater.on('update-available', () => {
            console.log('update-available:::', arguments)
    
            sendUpdateMessage(message.updateAva)
        })
    
        // 未发现有新版本
        autoUpdater.on('update-not-available', () => {
            console.log('update-not-available:::', arguments)
    
            sendUpdateMessage(message.updateNotAva)
        })
    
        // 更新下载进度事件
        autoUpdater.on('download-progress', progressObj => {
            console.log('download-progress:::', progressObj)
            
            mainWindow.setProgressBar(progressObj.percent / 100)
        })
    
        // 下载完成，询问用户是否更新
        autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
            console.log('update-downloaded::: 下载完成，询问用户是否更新') 
            
            mainWindow.webContents.send('ev-should-update', {
                event,
                releaseNotes,
                releaseName,
                releaseDate,
                updateUrl,
                quitAndUpdate
            })
        })
    
        function sendUpdateMessage(text) {
            mainWindow.webContents.send('ev-message', text)
        }
    }
    
    module.exports = {
        handleUpdate
    }

代码位置如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1][]

### **第四步，在主进程中引入update.js** ###

在/src/main/index.js主进程文件中引入，并执行handleUpdate()

import {
        app,
        BrowserWindow,
        screen
    } from 'electron'
    const path = require('path')
    
    const { handleUpdate } = require('./model/update')
    
    /**
     * Set `__static` path to static files in production
     * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
     */
    if (process.env.NODE_ENV !== 'development') {
        global.__static = path.join(__dirname, '/static').replace(/\\/g, '\\\\')
    }
    
    let mainWindow
    const winURL = process.env.NODE_ENV === 'development' ? `http://localhost:9080` : `file://${__dirname}/index.html`
    
    
    function createWindow() {
        const size = screen.getPrimaryDisplay().workAreaSize
        const width = parseInt(size.width * 0.7)
        const height = parseInt(size.height * 0.9)
    
        mainWindow = new BrowserWindow({
            width,
            height,
            minWidth: 900,
            minHeight: 600,
            frame: false,
            useContentSize: true,
            autoHideMenuBar: true,
            webPreferences:{
                nodeIntegration: true // 在网页中集成Node
            }
        })
    
        mainWindow.loadURL(winURL)
    
        mainWindow.on('closed', () => {
            mainWindow = null
        })
    
        handleUpdate(mainWindow) // 在这里执行，并把mainWindow传入
    }
    
    // 单例应用
    if (process.env.NODE_ENV === 'production') {
        const getTheLock = app.requestSingleInstanceLock()
    
        if (!getTheLock) {
            app.quit()
        } else {
            app.on('second-instance', (event, commandLine, workingDirectory) => {
                if (mainWindow) {
                    if (mainWindow.isMinimized()) mainWindow.restore()
                    mainWindow.focus()
                }
            })
    
            app.on('ready', createWindow)
        }
    }
    
    app.on('window-all-closed', () => {
        if (process.platform !== 'darwin') {
            app.quit()
        }
    })
    
    app.on('activate', () => {
        if (mainWindow === null) {
            createWindow()
        }
    })

### 第五步，在渲染进程中触发检测更新事件 ###

/src/renderer/App.vue

<template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
    
      mounted() {
        // 500毫秒延时避免渲染时卡顿
        setTimeout(() => {
          this.$electron.ipcRenderer.send('ev-check-for-update');
        }, 500);
    
        this.$electron.ipcRenderer.on("ev-message", (event, message) => {
          this.$notify({
            message,
            title: "提示",
          });
        });
    
        this.$electron.ipcRenderer.on("ev-should-update", (event, message) => {
          this.$confirm("检查到新版本，是否更新?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$electron.ipcRenderer.send("ev-update-now");
          });
        });
      },
    };
    </script>
    
    <style>
    /* CSS */
    </style>

### 第六步，打包 ###

首先，将package.json中的version改为0.0.1，执行npm run build打包，此时会生成0.0.1的.exe包和latest.yml文件。这是我们待会用来测试的包。

随后，将package.json中的version改为0.0.2，再执行npm run build打包，将打出的build文件夹下的0.0.2的.exe包和latest.yml文件拖到node服务的/public/package文件夹下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2][]

### 最后，测试 ###

启动node服务

双击打开0.0.1版本的包，会提示正在“正在检查更新……”，然后弹出“检查到新版本，是否更新?”的提示，点击确定，即可更新

[https_blog.csdn.net_weixin_43272648_article_details_104339699]: https://blog.csdn.net/weixin_43272648/article/details/104339699
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70]: /images/20221123/9cc743cfca124c9290be93e848be5a8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/73f9952f914742dc9bc0142396fb6159.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 2]: /images/20221123/5e0baf6254fd4e3c9c757f334df2c218.png