监听网站是否部署刷新

 

import { ElMessage } from 'element-plus';

/**
 * 监听网站是否重新部署
 */
const scriptReg = /\<script.*src=["'](?<src>[^"']+)/gm;
let lastScripts;
const DURATION = 6000;
let messageInstance;

async function getNewScripts() {
　　// 获取浏览器的html Date.now()是为了防止拿到缓存
  const html = await fetch('/?_timestamp=' + Date.now()).then(res => res.text());
  let result = [];
  let match;
  while ((match = scriptReg.exec(html))) {
    result.push(match.groups.src);
  }
  return result;
}

async function needUpdate() {
  const newScripts = await getNewScripts();
  if (!lastScripts) {
    lastScripts = newScripts;
    return false;
  }
  let result = false;
　　// 比较老的和新的文件长度是否一致，不一致则认为改动
  if (lastScripts.length !== newScripts.length) {
    result = true;
  } else {
    for (let i = 0; i < newScripts.length; i++) {
　　　　//比较每个文件是否一致，不一致则认为改动
      if (lastScripts[i] !== newScripts[i]) {
        result = true;
        break;
      }
    }
  }
  lastScripts = newScripts;
  return result;
}

async function autoUpdate() {
  const timer = setInterval(async () => {
    const willUpdate = await needUpdate();
    if (willUpdate && !messageInstance) {
      messageInstance = buildMessageInstance(timer);
    }
  }, DURATION);
}

// 生成消息实例
function buildMessageInstance(timer) {
  return ElMessage({
    showClose: true,
    message: console.log(系统已经更新),
    type: 'success',
    duration: 0,
    onClose: () => {
      clearTimeout(timer);
      messageInstance = null;
    },
  });
}

// 判断是否是生产环境
if (import.meta.env.PROD) {
  autoUpdate();
}

 

方案二，获取资源文件是否存在

优点：不耗费流量

const checkVersionUpdate = async () => {
  // 已通知过更新，停止后续检测，等待页面刷新
  if (hasNotifiedUpdate.value) return;
  try {
    // 1. 从当前页面拿到真实的带 hash 资源地址
    const entryScript = document.getElementById('vite-legacy-entry');
    if (!entryScript) {
      return;
    }
    const url = entryScript.dataset.src;
    if (!url) {
      return;
    }

    // 2. 用 HEAD 请求，只拿响应头，不下载文件
    const res = await fetch(url, {
      method: 'HEAD',
      cache: 'no-store',
      credentials: 'same-origin', // 同域请求，避免跨域影响
    });

    // 3. 判断是否存在版本更新
    let updated = false;
    if (res.status === 404) {
      console.log('Version update detected: the old resource no longer exists');
      updated = true;
    } else {
      const contentType = res.headers.get('content-type') || '';
      if (contentType.includes('text/html')) {
        console.log('Version update detected: server returned index.html');
        updated = true;
      }
    }

    // 4. 检测到更新：弹出提示，3秒后自动刷新页面
    if (updated) {
      hasNotifiedUpdate.value = true;
      clearInterval(timer.value);
      timer.value = null;

      ElMessage({
        type: 'warning',
        message: '系统已更新，3秒后将自动刷新浏览器页面以获取最新应用',
        duration: 0,
        showClose: true,
      });

      // 等待3秒后自动刷新页面，刷新后 onMounted 会重新启动轮询
      setTimeout(() => {
        window.location.reload();
      }, 3000);
      return;
    }
  } catch (err) {
    console.log('Request exception:', err.message);
    // 为了避免误判更新，异常场景不直接判定为更新
  }
};

　方案三：使用vite-plugin-pwa插件进行资源监控（资料链接：https://juejin.cn/post/7520066847706710027）