溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“Vue實現自動檢測及版本更新的方法是什么”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue實現自動檢測及版本更新的方法是什么”文章吧。
1，每隔一小段時間fetch請求一次服務器首頁數據，解析為純文本。
2，識別純文本里對應script標簽路徑文件指紋是否發生變動
3，有變動則彈框提示引導用戶進行刷新操作
核心代碼：
fetch('/').then(res=>res.text()).then(res=>console.log(res))返回結果
由于vue是單頁面，所以返回數據一般都不多，一目了然如下：
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <link rel=icon href=./favicon.ico> <meta name=viewport content="width=device-width,initial-scale=1"> <script type=module crossorigin src=./assets/index.b3865953.js> </script> <body> <div id=app></div><script src=./js/WsUtil.js type=text/javascript charset=utf-8></script> </body> </html>
仔細觀察返回數據不難發現script標簽里的 <script type=module crossorigin src=./assets/index.b3865953.js> </script> 所對應的文件路徑是./assets/index.b3865953.js 這是由于前端工程化會自動給文件帶上文件指紋，只要這些文件有變動，那么這些文件指紋也就是hash值也會跟著變化，每隔一小段時間去分析頁面中script元素的js，只要發現js路徑有變化，說明這個系統是有所改動。
具體代碼如下:
//請求首頁，timestep是為了避免緩存數據
//請求首頁
async function newScripts(){
const html = await fetch('/?timestep='+ Date.now()).then((res)=>res.text());
scriptReg.lastIndex = 0;//正則分析頁面所有url地址
let result = [];//保存分析數據到一個數組里
let match;
while((match=scriptReg.exec(html))){
result.push(match.groups.src)
}
return result;//返回數組
}//數組里就記錄了這一次請求首頁在首頁當中所有的js的獲取地址
首先調用newScripts拿到當前頁所有js路徑
代碼如下：
async function needUpdate(){
const newScripts = await newScripts();//調用newScripts
if(!lastSrcs){//如果之前沒有保存頁面js地址的話，進行一次保存，初始化并存下當前數據
lastSrcs = newScripts;
return false;
}
let result = false ;
if(lastSrcs.length !== newScripts.length){
result = true;
}
for(let i = 0;i<lastSrcs.length;i++){
if(lastSrcs[i] !== newScripts[i]){
result = true;
break ;
}
}
}
lastSrcs = newScripts;
return result;
}每隔兩秒調用 needUpdate檢查更新函數，判斷是否有變化，有更新則提示用戶刷新頁面，然后在調用自身，不斷的進行檢查，從而達到提示更新的目的。
代碼如下：
const timeData=2000;//檢查間隔時間
function autRef(){
setTimeout(async()=>{
const willUp = await needUpdate();//調用檢查更新函數
if(willUp){
const result = confirm('數據更新點擊確認刷新當前頁')
};
if(result){
location.reload();//刷新當前頁
}
autRef();
},timeData)
}這里只做了個簡單的彈窗，當然大家可以繼續優化，可以寫成任意自己想要的樣子。
以上就是關于“Vue實現自動檢測及版本更新的方法是什么”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
