vue+electron 自动更新

1. 配置 package.json或vue.config.js文件中的应用更新服务器地址
javascript 复制代码
module.exports = {
  pluginOptions: {
    electronBuilder: {
        ...
        
        publish: [
          {
            provider: 'generic',
            url: 'http://qc***/***'  // 服务器地址
          }
        ]

        ...

      }
    }
  }
}
2. 在主进程写更新应用逻辑

checkupdate.js 文件或 main.js 中写入

javascript 复制代码
import { autoUpdater } from 'electron-updater'
const { build } = require("../../../package.json")
const { app, dialog } = require('electron');
const path = require("path");
import { ipcRenderer } from "electron";
const websocket = require('ws')

//跳过打包检查  开发环境使用  打包的时候注释掉
// Object.defineProperty(app, 'isPackaged', {
// 	get() {
// 		return true;
// 	}
// });
/**
 * -1 检查更新失败 0 正在检查更新 1 检测到新版本,准备下载 2 未检测到新版本 3 下载中 4 下载完成
 **/
class Update {
    mainWindow
    constructor() {
        autoUpdater.setFeedURL(build.publish[0].url)

        // 当更新发生错误的时候触发。
        autoUpdater.on('error', (err) => {
            if (err.message.includes('sha512 checksum mismatch')) {
                this.Message(this.mainWindow, -1, 'sha512校验失败')
            } else {
                this.Message(this.mainWindow, -1, '错误信息请看主进程控制台')
            }
        })

        // 当开始检查更新的时候触发
        autoUpdater.on('checking-for-update', (event, arg) => {
            this.timer(this.mainWindow, 0, "正在检查更新...", 5000)
        })

        // 发现可更新数据时
        autoUpdater.on('update-available', (event, arg) => {
            this.timer(this.mainWindow, 1, "发现新版本", 10000)
            this.timer(this.mainWindow, 1, "检测到新版本,正在下载安装包...", 15000)
        })

        // 没有可更新数据时
        autoUpdater.on('update-not-available', (event, arg) => {
            this.timer(this.mainWindow, 2, "暂未检测到新版本,当前版本为最新版本,无需更新", 15000)
        })

        // 下载监听  
        autoUpdater.on('download-progress', (progressObj) => {
            // {
            //   total: 1145589126,
            //   delta: 71139212,
            //   transferred: 71139212,
            //   percent: 6.209836527376395,
            //   bytesPerSecond: 69881348
            // }

            let total = this.renderSize(progressObj.total); //总大小
            let percent = parseFloat(progressObj.percent.toFixed(2)); //下载进度
            let bytesPerSecond = this.renderSize(progressObj.bytesPerSecond); //下载速度
            // let message = `总大小:${total} 下载进度:${percent}% 下载速度${bytesPerSecond}/S`
            let message = `总大小:${total} 下载进度:${percent}%`
            // this.Message(this.mainWindow, 3, message)
        })

        // 下载完成
        autoUpdater.on('update-downloaded', () => {
            // console.log('done')
            this.Message(this.mainWindow, 4, "新版本已下载完成,五秒后自动安装并重启...")
            setTimeout(() => {
                this.quitInstall();
            }, 5000)
        })
    }

    // 负责向渲染进程发送信息
    Message(mainWindow, type, data) {
        const senddata = {
            state: type,
            msg: data || ''
        }
        let journalSocket = new websocket("ws://localhost:16478");
        // mainWindow.webContents.send('update-msg', senddata)
        journalSocket.on("open", function () {
            journalSocket.send(data);
        });
    }

    // 执行自动更新检查
    checkUpdate(mainWindow) {
        this.mainWindow = mainWindow
        autoUpdater.updateConfigPath = path.resolve(__static, 'default-app-update.yml')
        // this.Message(this.mainWindow, 4, path.resolve(__static, 'default-app-update.yml'))
        // autoUpdater.currentVersion = "0.0.1";//调试使用 正式上线后注释掉
        autoUpdater.checkForUpdates().catch(err => {
            console.log('网络连接问题', err)
        })
    }

    // 退出并安装
    quitInstall() {
        autoUpdater.quitAndInstall()
    }

    // 处理文件大小格式化
    renderSize(value) {
        if (null == value || value == '') {
            return "0 Bytes";
        }
        var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
        var index = 0;
        var srcsize = parseFloat(value);
        index = Math.floor(Math.log(srcsize) / Math.log(1024));
        var size = srcsize / Math.pow(1024, index);
        size = size.toFixed(2);//保留的小数位数
        return size + unitArr[index];
    }

    // 定时器
    timer(mainWindow, number, message, time) {
        setTimeout(() => {
            this.Message(mainWindow, number, message)
        }, time)
    }
}


export default Update

3. 打包升级版的应用(v1.1.0)

注意:

每次打包记得去package.json文件中修改version版本号,这样系统才会检测到最新版本

打包后 dis有如下两个文件:

新版本安装包.exe

latest.yml

将上面两个文件复制到 '更新服务器' (http://qc***/***) 目录下;

以后每次有更新就复制这两个文件至 '更新服务器',旧版本的应用的执行文件(.exe)可以删除。

相关推荐
林强1812 小时前
前端文件预览docx、pptx和xlsx
前端
计算机学姐2 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
像是套了虚弱散5 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan5 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇5 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15886 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追7 小时前
Vue组件化开发
前端·html
艾德金的溪7 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长7 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH7 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js