今天介绍的是通过轮询的方式去检测服务端是否发布了新版本，从而提醒客户刷新页面，提升用户体验。

1、实现思路

1. 使用轮询的方式获取项目中 index.html 文件。
2. 查询文件引入的 JS 文件是否有更新（ Vue 每次打包后会生成新的引入文件，如 login.513ef76d.js）。
3. 对比新旧文件，如果有不同，则说明服务器中的项目文件已经更新，需要提示用户刷新页面以获取最新的项目资源。

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 = 0let 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 = newScriptsreturn false}let result = falseif (lastSrc.length !== newScripts.length) {result = true}for (let i = 0; i < lastSrc.length; i++) {if (lastSrc[i] !== newScripts[i]) {result = truebreak}}lastSrc = newScriptsreturn result
}/*** 自动更新定时器*/
function autoRefresh() {setTimeout(async () => {const needUpdate = await hasNewVersion()if (needUpdate) {const result = confirm('项目发布新版本，立即更新？')if (result) {location.reload()}}autoRefresh()}, 5000)
}autoRefresh()

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

import './auto-update'

3、测试

将项目打包发布，浏览器访问项目

改变项目中的页面内容，重新打包发布

点击 “确定” 之后，页面就会自动刷新了

如您在阅读中发现不足，欢迎留言！！！