对于在react项目开发中每次发版存在浏览器缓存问题解决办法

46次阅读

共计 718 个字符，预计需要花费 2 分钟才能阅读完成。

前言
首先，我们在进行开发前要有一个思路：判断当前版本与前一个版本是否相同，不同就刷新页面。
1. 在每次运行时新建一个 js 文件
（fs 模块用于对系统文件及目录进行读写操作。）通过 fs 进行写入文件：
const Version=new Date().getTime();
var content =”getVersion(‘”+Version+”‘)”
fs.writeFile(‘public/version.js’,content,function(err){
if(err){
return console.log(err)
}
})
在 public 文件家中就会出现 version.js 文件，这个 js 文件的内容为随机数。内容如下：
再进入页面调用路由的时候引入这个 js 文件
<Route name=”home” breadcrumbName=” 首页 ” path=”/” component={MainLayout} onEnter={(a,b)=>{
var versionScript=document.createElement(‘script’);
versionScript.src=window.location.origin+’/xxx/xxx/xxx/version.js?v=’+new Date().getTime();
var s=document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(versionScript,s)
}}>
//…
</Route>
进行对比 js 文件然后决定是否刷新