前言

提到发版后如何自动清理缓存，大家都普遍都会想到配置nginx设置不缓存然后在配置打包生成hash值即可。但实际上据我本人亲测好像是没有用的（反正我试过不行T T），于是乎便产生了这篇文章。本文基于 vue 2.x 来进行配置。

思路

首先要知道怎么获取到最新版本，以及怎么判断客户端是旧版本。

服务端

我们知道，由 vue-cli 生成的项目中带有 public 文件夹，该文件夹下的文件不会被 webpack 处理，于是我们在该目录下新建一个 config.json 来存放我们的版本号：

这个 json 文件中大致是这个样：

{
    "version": ""
}

有了这个文件后我们在vue.config.js里配置一些东西，我们在每次打包后都会生成一个版本号存到config.json中的version属性里。

版本号的命名大家可以自行定义，但要保证版本号的唯一性。这里我使用了git-revision-webpack-plugin这个插件，他可以获取到 git分支 + commit hash 等一些提交信息，利用这些信息我们组装成一个唯一的版本号：

// vue.config.js
const gitRevisionPlugin = new GitRevisionPlugin();
const VERSION = `${gitRevisionPlugin.branch()}_${gitRevisionPlugin.version()}_${gitRevisionPlugin.commithash()}_${Timestamp}`;

组装完之后，我们写入config.json的version里（完整代码）：

// vue.config.js
const path = require("path");
const fs = require("fs");
const gitRevisionPlugin = new GitRevisionPlugin();
const VERSION = `${gitRevisionPlugin.branch()}_${gitRevisionPlugin.version()}_${gitRevisionPlugin.commithash()}_${Timestamp}`;
const configJSON = require(resolve("public/config.json"));
const configFile = path.resolve(__dirname, "public/config.json");
fs.writeFileSync(
  configFile,
  JSON.stringify(
    {
      ...configJSON,
      version: VERSION,
    },
    null,
    2
  )
);

这样在每次发版时服务器上都会存有一个最新的版本号了，接下来我们看看客户端如何处理。

客户端

在客户端里，我们需要获取到服务器上的最新版本号以及客户端的版本号，我们新建一个文件systemUpdate.js用来实现我们判断版本号的方法，通过axios请求服务器上的config.json获取最新版本号。之后将版本号存在localStorage中，来更新版本号。等下次发版时再取出本地的版本号与服务器上的对比即可。

import axios from "axios";

const getConfig = () => {
  return new Promise((resolve) => {
    axios
      .get(`/config.json`, {
        params: {
          _t: new Date().getTime(),
        },
      })
      .then((res) => {
        resolve(res.data);
      });
  });
};

export async function isNewVersion() {
  const config = await getConfig();
  let newVersion = config.version;
  let oldVersion = localStorage.getItem('version');
  let isUpdated = oldVersion !== newVersion;
  console.log('新版本号：', newVersion);
  console.log('旧版本号：', oldVersion);
  if (isUpdated) {
    // 如果version不一致，则清除本地基础数据
    localStorage.clear();
    localStorage.setItem("version", newVersion );
    window.location.reload(true);
    // do something ...

  }
  return isUpdated;
}

你可以在对比不一致后做你任何想做的事情。但一定要储存版本号以及刷新确保能获取到最新的资源。

判断时机

有了方法之后，接下来就是判断时机。这里我是在路由切换后进行新旧版本判断，我们来到定义vue-router的地方通过设置钩子守卫来判断新旧版本。

import { isNewVersion } from "@/utils/systemUpdate";

router.afterEach(async (to, from, next) => {
  if (to.meta.requireAuth) {
      // do something ...
      isNewVersion();
  }
});

接下来就是在本地跑起你的项目试验一下啦，当版本号不一致时会即刻刷新：

结尾

创作不易，大家动动小手，点个赞啦~ 有疑问咱们评论区见~