项目添加版本对比文件,强制刷新,保证项目不停的更新,浏览器也能访问最新的代码

59 阅读1分钟

项目添加版本对比文件,强制刷新,保证项目不停的更新,浏览器也能访问最新的代码

//version.js    版本对比文件方法
window.app_version = 'v20220418_1'; ///当前版本号,更新前手动修改
console.log('版本号加载了,'+app_version);

function addQueryStringArg () {
   window.location.reload();
}

window.old_version = window.localStorage.getItem('app_version');

if (window.app_version !== window.old_version) {
   window.localStorage.setItem('app_version', app_version);
   addQueryStringArg();
}

//第一次打开时触发,这个是放在项目的入口文件的<script></script>里
window.onload = function(){
  let sc = document.createElement('script');
  //加time是为了能每次加载最新的version.js文件,才能实现对比
  sc.src = '%PUBLIC_URL%/version.js?time=' + new Date().valueOf();
  document.body.appendChild(sc);
}

//考虑到用户并没有关闭页面,上面的方法触发不了,加了第二层保障,切换菜单时记载此文件

//如果是用的antdpro框架,在api.js文件的onPageChange方法添加下面的方法
let scripts = document.getElementsByTagName("script");
for (let i=0;i<scripts.length;i++) {//移出已加的version.js文件
    if (scripts[i] && scripts[i].src &&scripts[i].src.match('/version.js')){
        scripts[i].parentNode.removeChild(scripts[i]);
    }
}
let sc = document.createElement('script');
sc.src = '/version.js?time=' + new Date().valueOf();
document.body.appendChild(sc);

//如果是自己写的菜单,自己放在合适的地方吧

//以上基本上能保障用户在使用最新的项目