前端自动监测更新

• 实现逻辑

每隔2秒过去index.html的script连接，如果地址变了，就刷新页面，从而实现主动更新

• 使用 serve 静态服务器

npm install -D serve

• 配置package.json

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "preview": "npm run build && serve -s -p 3001 dist"
  }
}

-s 参数是为了正确处理单页应用（SPA）的路由。

• 在mian.js引入autoUpdate.js

/*
 * @Description: 
 * @Autor: sy
 * @Date: 2025-10-19 21:10:59
 * @LastEditors: sy
 * @LastEditTime: 2025-10-19 22:12:17
 */
/* eslint-disable */
let lastSrcs; // 上一次获取到的script地址
// const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm;

/**
 * 获取最新页面中的script链接
 */
async function extractNewScrips() {
  const resp = await fetch('/?_timestamp=' + Date.now());
  const html = await resp.text();

  const scriptReg = /<script[\s\S]*?src=["']([^"']+)["']/gi; // 跨行、非贪婪
  const result = [];
  let match;
  while ((match = scriptReg.exec(html))) {
    result.push(match[1]);
  }
  return result;
}

async function needUpdate() {
  const newScripts = await extractNewScrips();
  console.log('newScripts', newScripts);

  if (!lastSrcs) {
    lastSrcs = newScripts;
    return false;
  }

  let result = false;
  if (lastSrcs.length !== newScripts.length) {
    result = true;
  } else {
    for (let i = 0; i < lastSrcs.length; i++) {
      if (lastSrcs[i] !== newScripts[i]) {
        result = true;
        break;
      }
    }
  }
  lastSrcs = newScripts;
  return result;
}

const DURATION = 2000;
function autoRefresh() {
  setTimeout(async () => {
    const willUpdate = await needUpdate();
    if (willUpdate) {
      const result = confirm("检测到有新版本，是否刷新页面？");
      if (result) {
        location.reload();
      }
    }
    autoRefresh();
  }, DURATION);
}
autoRefresh();