VUE項(xiàng)目自動(dòng)檢測服務(wù)端是否發(fā)布了新版本
今天介紹的是通過輪詢的方式去檢測服務(wù)端是否發(fā)布了新版本,從而提醒客戶刷新頁面,提升用戶體驗(yàn)。
1、實(shí)現(xiàn)思路
- 使用輪詢的方式獲取項(xiàng)目中 index.html 文件。
- 查詢文件引入的 JS 文件是否有更新( Vue 每次打包后會(huì)生成新的引入文件,如 login.513ef76d.js)。
- 對比新舊文件,如果有不同,則說明服務(wù)器中的項(xiàng)目文件已經(jīng)更新,需要提示用戶刷新頁面以獲取最新的項(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、測試
將項(xiàng)目打包發(fā)布,瀏覽器訪問項(xiàng)目
改變項(xiàng)目中的頁面內(nèi)容,重新打包發(fā)布
點(diǎn)擊 “確定” 之后,頁面就會(huì)自動(dòng)刷新了
到此這篇關(guān)于VUE項(xiàng)目自動(dòng)檢測服務(wù)端是否發(fā)布了新版本的文章就介紹到這了,更多相關(guān)VUE 自動(dòng)檢測服務(wù)端新版本內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
el-form-item?prop屬性動(dòng)態(tài)綁定不生效問題及解決
這篇文章主要介紹了el-form-item?prop屬性動(dòng)態(tài)綁定不生效問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07詳解vue項(xiàng)目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程
這篇文章主要介紹了將vue的項(xiàng)目打包后通過百度的BAE發(fā)布到網(wǎng)上的流程,主要運(yùn)用的技術(shù)是vue+express+git+百度的應(yīng)用引擎BAE。需要的朋友可以參考下2018-03-03vue打包上傳服務(wù)器加載提示錯(cuò)誤Loading chunk {n} failed
這篇文章主要為大家介紹了vue打包上傳服務(wù)器加載提示錯(cuò)誤Loading chunk {n} failed解決方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))
這篇文章主要介紹了Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10如何實(shí)現(xiàn)echarts markline標(biāo)簽名顯示自己想要的
這篇文章主要介紹了實(shí)現(xiàn)echarts markline標(biāo)簽名顯示自己想要的操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07axios向后臺(tái)傳遞數(shù)組作為參數(shù)的方法
今天小編就為大家分享一篇axios向后臺(tái)傳遞數(shù)組作為參數(shù)的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08