VUE項(xiàng)目自動(dòng)檢測(cè)服務(wù)端是否發(fā)布了新版本
今天介紹的是通過(guò)輪詢(xún)的方式去檢測(cè)服務(wù)端是否發(fā)布了新版本,從而提醒客戶(hù)刷新頁(yè)面,提升用戶(hù)體驗(yàn)。
1、實(shí)現(xiàn)思路
- 使用輪詢(xún)的方式獲取項(xiàng)目中 index.html 文件。
- 查詢(xún)文件引入的 JS 文件是否有更新( Vue 每次打包后會(huì)生成新的引入文件,如 login.513ef76d.js)。
- 對(duì)比新舊文件,如果有不同,則說(shuō)明服務(wù)器中的項(xiàng)目文件已經(jīng)更新,需要提示用戶(hù)刷新頁(yè)面以獲取最新的項(xiàng)目資源。
2、實(shí)現(xiàn)步驟
在 src 目錄下新建一個(gè) auto-update.js 文件,內(nèi)容為:
let lastSrc;
// 匹配 Script 標(biāo)簽中的 src
const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm;
/**
* 提取服務(wù)器的 Script 標(biāo)簽中的 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
}
/**
* 自動(dòng)更新定時(shí)器
*/
function autoRefresh() {
setTimeout(async () => {
const needUpdate = await hasNewVersion()
if (needUpdate) {
const result = confirm('項(xiàng)目發(fā)布新版本,立即更新?')
if (result) {
location.reload()
}
}
autoRefresh()
}, 5000)
}
autoRefresh()
在 main.js 文件中引入 auto-update.js 文件即可
import './auto-update'
3、測(cè)試
將項(xiàng)目打包發(fā)布,瀏覽器訪(fǎng)問(wèn)項(xiàng)目

改變項(xiàng)目中的頁(yè)面內(nèi)容,重新打包發(fā)布

點(diǎn)擊 “確定” 之后,頁(yè)面就會(huì)自動(dòng)刷新了
到此這篇關(guān)于VUE項(xiàng)目自動(dòng)檢測(cè)服務(wù)端是否發(fā)布了新版本的文章就介紹到這了,更多相關(guān)VUE 自動(dòng)檢測(cè)服務(wù)端新版本內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue常見(jiàn)路由跳轉(zhuǎn)的幾種方式小結(jié)
本文主要介紹了常見(jiàn)路由跳轉(zhuǎn)的幾種方式,主要介紹了四種常見(jiàn)方式,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
詳解如何將 Vue-cli 改造成支持多頁(yè)面的 history 模式
本篇文章主要介紹了詳解如何將 Vue-cli 改造成支持多頁(yè)面的 history 模式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
一文詳解vue各種權(quán)限控制與管理實(shí)現(xiàn)思路
這篇文章主要為大家介紹了vue各種權(quán)限控制與管理的實(shí)現(xiàn)思路詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
詳解Webstorm 新建.vue文件支持高亮vue語(yǔ)法和es6語(yǔ)法
這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語(yǔ)法和es6語(yǔ)法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10
vue.js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02
Vue3+element實(shí)現(xiàn)表格數(shù)據(jù)導(dǎo)出
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何利用element實(shí)現(xiàn)表格數(shù)據(jù)導(dǎo)出功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴快跟隨小編一起學(xué)習(xí)一下吧2023-07-07

