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 自动检测服务端新版本内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Element-ui DatePicker显示周数的方法示例
这篇文章主要介绍了Element-ui DatePicker显示周数的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-07-07vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)
这篇文章主要介绍了vue3.0 移动端二次封装van-uploader上传图片组件,此功能最多上传6张图片,并可以实现本地预览,实现代码简单易懂,需要的朋友可以参考下2022-05-05vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
今天小编就为大家分享一篇vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11vue + element-ui 季度选择器组件 el-quarter-picker示例详解
本文介绍如何在Vue项目中使用基于Element-UI的季度选择器组件ElQuarterPicker,通过引用并调用ElQuarterPicker.vue组件来实现季度选择功能,感兴趣的朋友跟随小编一起看看吧2024-09-09
最新评论