Vue前端实战：新版本自动检测与用户刷新提示

在前端项目上线过程中，我们常常会遇到这样的问题：

产品已经发布了新版本，但用户打开页面时仍然看到旧版本，甚至操作出现异常。
罪魁祸首往往就是——浏览器缓存。

为了让用户尽快用上最新版本，前端需要一种机制：检测是否有新版本，并提示用户刷新。本文将结合常见方案分享具体实现。

为什么会出现旧版本？

浏览器出于性能考虑，会缓存静态资源（HTML、JS、CSS、图片等）。
如果不做额外处理，用户可能长时间加载的都是缓存资源，而不是最新构建的文件。

尤其是在使用 SPA（单页面应用）+ 缓存策略（如 Vue、React 项目用到的 service worker 或 nginx cache）时，这个问题更明显。

常见解决方案

方案一：基于版本号检测

1、后端在构建时生成一个 版本号文件（例如 version.json 或 meta.json），里面存放构建时间或 hash 值。
2、前端定时请求该文件，与当前项目内置的版本号进行对比。
3、如果不同，则说明有新版本 → 提示用户刷新。

// version.json
{
  "version": "202508191230"
}

// main.js
async function checkVersion() {
  try {
    const res = await fetch('/version.json?t=' + Date.now()); // 防止缓存
    const data = await res.json();
    const currentVersion = localStorage.getItem('app_version');

    if (currentVersion && currentVersion !== data.version) {
      // 发现新版本
      alert('检测到新版本，请刷新页面！');
      // 或者自定义弹窗，按钮点击后刷新
      // window.location.reload(true);
    }

    localStorage.setItem('app_version', data.version);
  } catch (err) {
    console.error('版本检测失败', err);
  }
}

// 定时轮询，比如每 5 分钟检测一次
setInterval(checkVersion, 5 * 60 * 1000);

优点：实现简单，兼容性好。
缺点：需要额外生成 version.json。

方案二：基于 Service Worker

如果项目使用了 PWA / Service Worker，其实已经具备了检测新资源的能力。
1、Service Worker 会在后台静默下载新版本。
2、新版本准备好后，可以通过 updatefound 事件监听。
3、通知用户“有新版本，请刷新”。

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(reg => {
    reg.onupdatefound = () => {
      const newWorker = reg.installing;
      newWorker.onstatechange = () => {
        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
          // 有新版本
          alert('新版本已更新，点击刷新！');
        }
      };
    };
  });
}

优点：原生支持缓存管理。
缺点：对初学者不太友好，需要理解 PWA。

方案三：基于文件 hash（构建层解决）

前端框架（Vue CLI / Vite / Webpack）通常会在构建时给文件名加上 hash，如:

app.8a97f2.js
app.39bc21.js

当文件发生变化时，hash 会不同。
如果 HTML 被正确刷新，JS/CSS 一定是最新的。
但问题是：HTML 本身常常被浏览器缓存，导致仍然加载旧的 JS 链接。
所以需要通过 HTTP 缓存策略 配合：
HTML：Cache-Control: no-cache（每次都回源检查）
JS/CSS：Cache-Control: max-age=31536000, immutable（长期缓存）

优点：前端零感知，纯后端配置。
缺点：需要运维/后端配合。

用户提示的最佳实践

检测到新版本后，不建议直接强制刷新页面（可能影响用户操作）。
比较友好的做法是：弹出提示框，让用户自行决定。

例如：

<template>
  <div v-if="showUpdate" class="update-tip">
    发现新版本，是否刷新？
    <button @click="refresh">刷新</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const showUpdate = ref(false);

function refresh() {
  window.location.reload(true); // 强制刷新
}

// 模拟检测逻辑
setTimeout(() => {
  showUpdate.value = true;
}, 10000);
</script>

<style>
.update-tip {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #409eff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
}
</style>

这样用户可以在合适的时机刷新，不会打断当前操作。

总结

检测新版本并提示用户刷新，有以下几种常见方案：
1、版本号文件对比（推荐，简单实用）。
2、Service Worker（适合 PWA 应用）。
3、构建 hash + 缓存策略（根治缓存问题）。

不同项目可根据实际情况选择。
个人经验是：小项目用版本号对比，大项目用 hash + 缓存策略，PWA 应用用 Service Worker。

这样用户既能第一时间享受到新功能，也不会因为缓存问题踩坑。 🚀