发布了新版本。却仍有很多使用者打开后看到旧页面这导致功能更新无法及时生效，给业务带来不可忽视的痛点。

至于建立脚本，生成version.json并注入全局变量

在public目录下生成version.json

利用建立工具的钩子。在每次build完成后在dist目录生成一个version.json文件，用于记录当前建立时间戳。

再看方案A，Vite 的 buildEnd 钩子（vite.config.js)

// vite.config.js
import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import fs from 'fs';import path from 'path';export default defineConfig({
plugins:,define: {
// 注入全局常量。可通过 import.meta.env 或直接使用
__BUILD_VERSION__: JSON.stringify.toString)
}
});

方案B的观点是，Vue CLI 的 chainWebpack

// vue.config.js
const fs = require;const path = require;module.exports = {
chainWebpack: config => {
// 注入全局变量 $version
config.plugin.tap(args => {
args = JSON.stringify.toString);return args，});},configureWebpack: {
plugins:
}
};

. 前端版本检查逻辑

. 主要代码

主要思路：

• 获取全局注入的建立版本；若用 Vue CLI 则是window.$version。
• 周期性请求服务器上的;若不一致则触发强制刷新，其实，为避免死循环，用 localStorage 标记已刷新过的版本。话说回来，
• 刷新时通过添加时间戳参数确保所有资源被重新加载。兼容多数浏览器，老实说，
• 可根据环境调整轮询间隔。
• 如果 Service Worker 存在需要额外清理缓存；此方案不覆盖该情况，仅做基础实现。老实说，
• 适用于 CDN + 强缓存部署场景；可自定义错误提示或弹窗通知使用者手动刷新。
• 关键是防止无限循环刷新，已解决方式请参考下文“防死循环机制”。
• * 定义为秒数：如5000即5秒一次。*
• * VERSION_URL 为服务器上/version.json”方法。 *

. 如果需要兼容 Vue

. 关键细节说明

. 建立版本号的唯一性

• D​ate.now 时间戳作为唯一标识。每次建立不同且天然顺序递增，保证较大值代表最新版。其实，
• If 更语义化的编号想用。也可以从 package.json 提取，例如「1.0.0」等，但会增加维护成本。.

. 绕过缓存

• "GET /version.json?t=" 确保请求始终拿到最新文件，而不是 CDN 缓存。.
此处仅展示主要思路，实际项目可根据业务复杂度做进一步封装与调整。说起来，.
如需 Service Worker 清理。可结合 Workbox 等库实现完整离线体验。.

. . . .

---

请根据具体项目环境选择合适方案。并测试验证无误后再上线，以免因配置错误导致应用卡住或频繁刷新的问题。