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

相关文章

  • vue常见路由跳转的几种方式小结

    vue常见路由跳转的几种方式小结

    本文主要介绍了常见路由跳转的几种方式,主要介绍了四种常见方式,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • 详解如何将 Vue-cli 改造成支持多页面的 history 模式

    详解如何将 Vue-cli 改造成支持多页面的 history 模式

    本篇文章主要介绍了详解如何将 Vue-cli 改造成支持多页面的 history 模式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 一文详解vue各种权限控制与管理实现思路

    一文详解vue各种权限控制与管理实现思路

    这篇文章主要为大家介绍了vue各种权限控制与管理的实现思路详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

    详解Webstorm 新建.vue文件支持高亮vue语法和es6语法

    这篇文章主要介绍了Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法,非常具有实用价值,需要的朋友可以参考下
    2017-10-10
  • vue.js实现简单的计算器功能

    vue.js实现简单的计算器功能

    这篇文章主要为大家详细介绍了vue.js实现简单的计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • vue3自定义dialog、modal组件的方法

    vue3自定义dialog、modal组件的方法

    这篇文章主要介绍了vue3自定义dialog、modal组件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • vue中vant组件样式失效问题及解决

    vue中vant组件样式失效问题及解决

    这篇文章主要介绍了vue中vant组件样式失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 关于vue2使用swiper4的踩坑记录

    关于vue2使用swiper4的踩坑记录

    最近写vue的一个练手项目需要在里面实现一个轮播图,想到去用第三方插件,百度了一轮,发现大部分都是swiper这个插件,这篇文章主要给大家介绍了关于vue2使用swiper4踩坑的相关资料,需要的朋友可以参考下
    2022-01-01
  • Vue3+element实现表格数据导出

    Vue3+element实现表格数据导出

    这篇文章主要为大家学习介绍了Vue3如何利用element实现表格数据导出功能,文中的示例代码讲解详细,感兴趣的小伙伴快跟随小编一起学习一下吧
    2023-07-07
  • 快速了解vue-cli 3.0 新特性

    快速了解vue-cli 3.0 新特性

    vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具,具有开箱即用并且提供简洁的自定义配置等功能。这篇文章主要介绍了快速了解vue-cli 3.0 新特性,需要的朋友可以参考下
    2018-02-02

最新评论