【Vue技巧之】生产部署自动更新提示

老张的哲学

发布于 2024-03-12 18:23:22

6670

发布于 2024-03-12 18:23:22

先说下故事背景，我们平时在部署Vue等前端项目的时候，因为客户端浏览器缓存原则，经常会出现修改后，而用户不能第一时间更新的情况，只能通过禁用缓存，或者配置nginx，或者干脆联系用户，让用户刷新页面等方案，我都尝试过，都不是很舒服，今天又学到了一个技巧，分享给大家，个人感觉还是可以的，是一个思路，可以往这个方向思考。

Part 1

说下思路和效果

思路其实很简单，就是我们可以在build后的index.html页面上，设置一个参数，也可以直接使用js文件的文件指纹参数，这里的文件指纹，其实就是编译后的文件的一个后缀，下次build的指纹肯定和上次的不一样：

<link href=/js/chunk-23e41f57.1c019000.js rel=prefetch>

我今天用一个参数来举例，比如说一个version=xx，然后写一个定时器，每隔几秒或者这个参数，只要发生了变化，就提示用户刷新页面，大概效果是这样的：

大概思路就是这样，只要build完成，手动修改或者自动获取下index.html的某个参数的值是否变化，来给客户端用户提醒，来获取刷新机制。

Part 2

设计具体的代码逻辑

有了思路，下边就比较简单了，这里用到了一个刷新的封装js方法即可，内容很简单，直接上代码，应该只要有前端经验的都能看懂。

首先在index.html配置下参数：

然后封装checkVersion方法，来处理具体逻辑：

// checkVersion.js
function fetchVersion() {
    // 使用 fetch API 来获取 index.html 文件
    return fetch('/')
      .then(response => response.text())
      .then(html => {
        // 使用正则表达式来提取版本号
        const versionMatch = html.match(/var version = (\d+);/);
        if (versionMatch && versionMatch.length > 1) {
          return versionMatch[1]; // 返回版本号
        }
        throw new Error('不能找到版本号。');
      });
  }
  
  function checkVersion() {
    let currentVersion; // 当前页面的版本号
  
    // 初始化时获取一次版本号
    fetchVersion().then(version => {
      currentVersion = version;
    });
  
    // 创建定时器，每10秒检查一次
    setInterval(() => {
      fetchVersion().then(newVersion => {
        // 检查版本号是否有变化
        if (newVersion !== currentVersion) {
          // 如果版本号变化，提示用户，并更新当前版本号
          if (confirm('检测到新版本，是否重新加载页面？如果信息还未提交完，请点击取消，继续填写.')) {
            window.location.reload(); // 用户确认后重新加载页面
          }
          currentVersion = newVersion; // 更新当前版本号，避免重复提示
        }
      }).catch(error => console.error('获取版本号失败：', error));
    }, 10000); // 设置时间间隔为 10000 毫秒（10 秒）
  }
  
  export default checkVersion;

接下来，只需要在主入口文件main.js引用即可：