VUE項目自動檢測服務端是否發(fā)布了新版本

更新時間：2025年01月02日 10:03:00 作者：Asurplus

本文主要介紹了VUE項目自動檢測服務端是否發(fā)布了新版本,通過輪詢方式檢測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('項目發(fā)布新版本，立即更新？')
            if (result) {
                location.reload()
            }
        }
        autoRefresh()
    }, 5000)
}

autoRefresh()

在 main.js 文件中引入 auto-update.js 文件即可