VUE项目自动检测服务端是否发布了新版本

 更新时间:2025年01月02日 10:03:00   作者:Asurplus  
本文主要介绍了VUE项目自动检测服务端是否发布了新版本,通过轮询方式检测Vue项目新版本并提示用户刷新页面,具有一定的参考价值,感兴趣的可以了解一下

今天介绍的是通过轮询的方式去检测服务端是否发布了新版本,从而提醒客户刷新页面,提升用户体验。

1、实现思路

  • 使用轮询的方式获取项目中 index.html 文件。
  • 查询文件引入的 JS 文件是否有更新( Vue 每次打包后会生成新的引入文件,如 login.513ef76d.js)。
  • 对比新旧文件,如果有不同,则说明服务器中的项目文件已经更新,需要提示用户刷新页面以获取最新的项目资源。

2、实现步骤

在 src 目录下新建一个 auto-update.js 文件,内容为:

let lastSrc;

// 匹配 Script 标签中的 src
const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm;

/**
 * 提取服务器的 Script 标签中的 src
 */
async function extractNewScripts() {
    const html = await fetch('/?_timestamp=' + Date.now()).then(resp => {
        return resp.text()
    })
    scriptReg.lastIndex = 0
    let result = []
    let match;
    while ((match = scriptReg.exec(html))) {
        result.push(match.groups.src)
    }
    return result
}

/**
 * 判断是否有新版本
 */
async function hasNewVersion() {
    const newScripts = await extractNewScripts()
    if (!lastSrc) {
        lastSrc = newScripts
        return false
    }
    let result = false
    if (lastSrc.length !== newScripts.length) {
        result = true
    }
    for (let i = 0; i < lastSrc.length; i++) {
        if (lastSrc[i] !== newScripts[i]) {
            result = true
            break
        }
    }
    lastSrc = newScripts
    return result
}

/**
 * 自动更新定时器
 */
function autoRefresh() {
    setTimeout(async () => {
        const needUpdate = await hasNewVersion()
        if (needUpdate) {
            const result = confirm('项目发布新版本,立即更新?')
            if (result) {
                location.reload()
            }
        }
        autoRefresh()
    }, 5000)
}

autoRefresh()

在 main.js 文件中引入 auto-update.js 文件即可

import './auto-update'

3、测试

将项目打包发布,浏览器访问项目

在这里插入图片描述

改变项目中的页面内容,重新打包发布

在这里插入图片描述

点击 “确定” 之后,页面就会自动刷新了

到此这篇关于VUE项目自动检测服务端是否发布了新版本的文章就介绍到这了,更多相关VUE 自动检测服务端新版本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue3项目中使用ECharts的方法步骤

    Vue3项目中使用ECharts的方法步骤

    这篇文章主要介绍了Vue3项目中使用ECharts的方法步骤,ECharts可以创建各种类型的图表,比如折线图、柱状图、饼图等,配置选项还包括颜色、数据缩放、工具箱等,以实现丰富的图表效果和交互功能,需要的朋友可以参考下
    2024-10-10
  • vue使用watch 观察路由变化,重新获取内容

    vue使用watch 观察路由变化,重新获取内容

    本篇文章主要介绍了vue使用watch 观察路由变化,重新获取内容 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-03-03
  • el-form-item prop属性动态绑定不生效问题及解决

    el-form-item prop属性动态绑定不生效问题及解决

    这篇文章主要介绍了el-form-item prop属性动态绑定不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue组件间传递数据的多种方法

    Vue组件间传递数据的多种方法

    在实际开发中,Vue组件之间的数据传递是最常见的需求,由于组件的作用域相互独立,如何在父子、兄弟和跨级组件间传递数据就显得尤为重要,本文将详细介绍多种Vue组件间传递数据的方,需要的朋友可以参考下
    2025-03-03
  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    详解vue项目打包后通过百度的BAE发布到网上的流程

    这篇文章主要介绍了将vue的项目打包后通过百度的BAE发布到网上的流程,主要运用的技术是vue+express+git+百度的应用引擎BAE。需要的朋友可以参考下
    2018-03-03
  • 在Vue 中使用Typescript的示例代码

    在Vue 中使用Typescript的示例代码

    这篇文章主要介绍了在Vue 中使用Typescript的示例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • vue打包上传服务器加载提示错误Loading chunk {n} failed

    vue打包上传服务器加载提示错误Loading chunk {n} failed

    这篇文章主要为大家介绍了vue打包上传服务器加载提示错误Loading chunk {n} failed解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Vue-Router基础学习笔记(小结)

    Vue-Router基础学习笔记(小结)

    这篇文章主要介绍了Vue-Router基础学习笔记(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 如何实现echarts markline标签名显示自己想要的

    如何实现echarts markline标签名显示自己想要的

    这篇文章主要介绍了实现echarts markline标签名显示自己想要的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • axios向后台传递数组作为参数的方法

    axios向后台传递数组作为参数的方法

    今天小编就为大家分享一篇axios向后台传递数组作为参数的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论