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

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

问题：

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

答案：

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

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

优点：

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

实现步骤：

1. 修改构建脚本：

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

2. 添加轮询函数：

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

3. 在 mounted 钩子中启动轮询：

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

4. 在 beforeDestroy 钩子中清除轮询：

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

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

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