在具體項目場景中，前端發版后，用戶不手動刷新，則感知不到更新；經常會出現：前端更新了某個功能，導致舊功能使用出現問題，而被用戶提單；

關于這個問題有多種解決方式：

• WebSocket ,需要后端配合
• 接口交互,需要后端配合
• nginx 配置
• 前端輪詢是否更新（純前端解決）

因為后端忙，所以暫時寫了個純前端的解決方案

import { ElMessage, ElMessageBox } from 'element-plus';let lastSrcs = [] as any;const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm;
async function getscript() {const html = await fetch('/?temp=' + Date.now()).then(res => {return res.text();})scriptReg.lastIndex = 0;let result = []let match;//@ts-ignorewhile((match = scriptReg.exec(html))) {//@ts-ignoreresult.push(match.groups.src)}return result
}async function needUpdate() {const newScripts = await getscript()if(!lastSrcs.length) {lastSrcs = newScriptsreturn 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
}const DURATION = 5000
function autoRefresh() {setTimeout(async()=> {const willUpdate = await needUpdate();if(willUpdate) {ElMessageBox.confirm('檢測到系統有更新，是否立即更新?','系統提示',{confirmButtonText: '更新',cancelButtonText: '稍后再說',type: 'warning',}).then(() => {window.location.reload()}).catch(() => {ElMessage.info('已取消，請稍后自己手動刷新頁面',)})}autoRefresh()},DURATION)
}autoRefresh()

再到 main.ts中引入這個文件即可