vue项目更新后文件存在缓存，需要强制刷新才能呈现更新

vue项目更新后文件存在缓存，需要强制刷新才能呈现更新

前言

vue项目每次发布新版本后，测试人员都要强制刷新才能更新浏览器代码来验证bug。对于用户来说，这更不合理。于是，想办法让浏览器自动更新文件。

开始

1.在static静态目录下新建version.json每次发版更改里面的版本号

{
    "version": "1.0.1"
}

2.在src中新建 libs/versionUpdate.js文件

import axios from 'axios'
 
const isNewVersion = () => {
  let url = `//${window.location.host}/static/version.json?t=${new Date().getTime()}`;
  axios.get(url).then(res => {
    if (res.status === 200) {
      let vueVersion = res.data.version;
      let localVueVersion = localStorage.getItem('vueVersion');
      if (localVueVersion && localVueVersion != vueVersion) {
        localStorage.setItem('vueVersion', vueVersion);
        window.location.reload();
        return;
      } else {
        localStorage.setItem('vueVersion', vueVersion);
      }
    }
  });
}
 
export default {
  isNewVersion
}

3.全局路由拦截中写，只要每次版本号不同就重新加载页面配合第一步就可以清楚浏览器缓存

import versionTood from '@/libs/versionUpdate'
 
router.beforeEach(( to, from, next ) => {
  //判断当前代码版本是否与服务器中代码版本一致，如不一致则刷新页面获取最新
  versionTood.isNewVersion();