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 自动检测服务端新版本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 十分钟封装一个好用的axios步骤示例

    十分钟封装一个好用的axios步骤示例

    这篇文章主要为大家介绍了十分钟封装一个好用的axios步骤示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 说说如何使用Vuex进行状态管理(小结)

    说说如何使用Vuex进行状态管理(小结)

    这篇文章主要介绍了说说如何使用Vuex进行状态管理(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue-cli如何修改打包项目结构及前缀

    vue-cli如何修改打包项目结构及前缀

    这篇文章主要介绍了vue-cli如何修改打包项目结构及前缀问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 详解vue3中如何使用youtube-player

    详解vue3中如何使用youtube-player

    这篇文章主要为大家介绍了详解vue3中如何使用youtube-player示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Element-ui DatePicker显示周数的方法示例

    Element-ui DatePicker显示周数的方法示例

    这篇文章主要介绍了Element-ui DatePicker显示周数的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    这篇文章主要介绍了vue3.0 移动端二次封装van-uploader上传图片组件,此功能最多上传6张图片,并可以实现本地预览,实现代码简单易懂,需要的朋友可以参考下
    2022-05-05
  • vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法

    vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法

    今天小编就为大家分享一篇vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue + element-ui 季度选择器组件 el-quarter-picker示例详解

    vue + element-ui 季度选择器组件 el-quarter-picker示例详解

    本文介绍如何在Vue项目中使用基于Element-UI的季度选择器组件ElQuarterPicker,通过引用并调用ElQuarterPicker.vue组件来实现季度选择功能,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • vue 自定义右键样式的实例代码

    vue 自定义右键样式的实例代码

    这篇文章主要介绍了vue 自定义右键样式的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • vue之数据代理详解

    vue之数据代理详解

    这篇文章主要为大家介绍了vue之数据代理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12

最新评论