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 自动检测服务端新版本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
el-form-item prop属性动态绑定不生效问题及解决
这篇文章主要介绍了el-form-item prop属性动态绑定不生效问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-07-07
vue打包上传服务器加载提示错误Loading chunk {n} failed
这篇文章主要为大家介绍了vue打包上传服务器加载提示错误Loading chunk {n} failed解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
如何实现echarts markline标签名显示自己想要的
这篇文章主要介绍了实现echarts markline标签名显示自己想要的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07


最新评论