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)可以删除。

相关推荐
king王一帅20 小时前
Incremark Solid 版本上线:Vue/React/Svelte/Solid 四大框架,统一体验
前端·javascript·人工智能
智航GIS1 天前
10.4 Selenium:Web 自动化测试框架
前端·python·selenium·测试工具
前端工作日常1 天前
我学习到的A2UI概念
前端
徐同保1 天前
为什么修改 .gitignore 后还能提交
前端
一只小bit1 天前
Qt 常用控件详解:按钮类 / 显示类 / 输入类属性、信号与实战示例
前端·c++·qt·gui
Mr -老鬼1 天前
前端静态路由与动态路由:全维度总结与实践指南
前端
颜酱1 天前
前端必备动态规划的10道经典题目
前端·后端·算法
wen__xvn1 天前
代码随想录算法训练营DAY10第五章 栈与队列part01
java·前端·算法
大怪v1 天前
前端佬们!!AI大势已来,未来的上限取决你的独特气质!恭请批阅!!
前端·程序员·ai编程
Mr -老鬼1 天前
功能需求对前后端技术选型的横向建议
开发语言·前端·后端·前端框架