提到发版后如何自动清理缓存，大家都普遍都会想到配置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();
}
});
接下来就是在本地跑起你的项目试验一下啦，当版本号不一致时会即刻刷新：
创作不易，大家动动小手，点个赞啦~ 有疑问咱们评论区见~