前端Vue发布新版本浏览器F5刷新获取新版本代码（强刷缓存）

原因：由于项目Vue经常改动代码，生产环境工作人员不大会用强刷浏览器清除缓存，致使不能及时获取版本更新导致错误。

注：因为缓存原因，浏览器F5不能清除缓存，就获取不到新的版本代码，一般需要CTRL+F5强制刷新清除缓存才能获取到新代码。

1、在Vue项目的入口文件main.js中引入代码

window.addEventListener('load', () => {
    // 获取当前版本号
    const currentVersion = localStorage.getItem('appVersion');
    // 如果当前版本号与最新版本号不一致，则清除缓存
    if (currentVersion !== version) {
        // const result = confirm('有新版本发布，请点击确定获取新版本！');
        // if (result) {
            localStorage.clear();
            localStorage.setItem('appVersion', version);
            location.reload();
        // }
    }
});

2、修改package.json

每次上传新代码记得迭代package.json中的version版本号，此方案是依据版本号控制的。

{
    "name": "vue",
    "version": "0.1.1",
    "private": true,
    ...
    ...
    ...
}

写在后面：此种方案需要浏览器被F5刷新了才能获取代码更新版本，想要不手动刷新浏览器就能自动强刷获取更新，我的思路是配合后端，将前端版本号放入数据库，每次发布版本时去数据库迭代版本号。写一个接口去查询版本号，前端定时查询这个接口，将版本号和接口获取的版本号进行对比，不一致就强刷浏览器。

各位如有更好的方案也可提出让我学习一下。

若有不对之处，敬请斧正！！！