Vue 管理系统页面缓存情况下，如何低成本强制客户端刷新获取最新代码？

强制客户端部署后刷新获取最新代码的代价最小化方法

问题：

在采用标签页形式的 Vue 管理系统中，出于性能考虑页面被缓存，但当项目更新部署后，用户仍使用旧代码可能导致问题。如何以较低成本强制客户端刷新获取最新代码？

答案：

以下方案提供了低成本解决方案：

构建时生成版本文件：构建项目时，将版本号输出到一个文本文件（如 /version.txt）。
轮询版本文件：前端定期轮询该版本文件，如果发现版本号已更新，则提示用户刷新浏览器。

优点：

不需要后端支持，降低开发成本。
仅需在前端实现，简化部署流程。

实现步骤：

修改构建脚本：

// 在构建结束时输出版本号到文件
const fs = require('fs');
const version = require('./package.json').version;
fs.writeFileSync('./version.txt', version);

添加轮询函数：

// 定期轮询版本文件
const pollVersion = () => {
  fetch('/version.txt')
    .then(res => res.text())
    .then(newVersion => {
      if (newVersion !== currentVersion) {
        alert('新版本已部署，请刷新浏览器。');
      }
    });
};

在 mounted 钩子中启动轮询：

mounted() {
  this.pollVersionInterval = setInterval(pollVersion, 5000); // 每 5 秒轮询一次
}

在 beforeDestroy 钩子中清除轮询：

beforeDestroy() {
  clearInterval(this.pollVersionInterval);
}

通过以上方式，无需后端配合即可强制客户端在部署后刷新获取最新代码，降低了开发成本和复杂性。

以上就是Vue 管理系统页面缓存情况下，如何低成本强制客户端刷新获取最新代码？的详细内容，更多请关注其它相关文章！