锐客网

  1. 首页 > it技术 > >

前端应用部署后页面缓存问题的解决

场景 由于vue项目上线后，用户页面异常，打开 F12 显示很多请求出现404，原因大概率在于当前页面使用了浏览器的缓存，请求旧的资源失败。
浏览器缓存机制解析 https://www.jianshu.com/p/7a3fa1079982
nginx服务器缓存机制解析 https://blog.csdn.net/u013032097/article/details/91435268
解决办法 1、在vue项目中解决
在入口文件index.html添加：



2、如果是部署在nginx上
在nginx的配置文件 nginx.config添加：
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
【前端应用部署后页面缓存问题的解决】如果是用nginx做反向代理的，这么加
location = /xx（xx为你的代理的项目名） {
add_header Cache-Control "no-cache, no-store";
}
如果nginx上有 proxy_cache 的配置，也考虑删掉，这是nginx的服务器缓存
3、如果是部署在Tomcat上
tomcat稍微麻烦点，需要开发并配置一个过滤器（Filter），如果你只懂前端，那可能需要找后端的兄弟帮忙了。
1、首先我们要用java写个过滤器：
前端应用部署后页面缓存问题的解决
文章图片
注意：路径要和第三步的配置保持一致
2、然后我们把这个过滤器打成jar包，名字随便，放在tomcat/lib目录下即可。
3、最后，我们需要修改配置文件tomcat/conf/web.xml，在末尾的上方增加以下代码：
前端应用部署后页面缓存问题的解决
文章图片
MyFilter是你给过滤器起的名字，可随便改
也没有太麻烦，应该大部分同学都能搞定。
4、ctrl+f5强制刷新浏览器，这是对于用电脑浏览器的用户来说
强制刷新 (Ctrl + F5)：浏览器不使用缓存，因此发送的请求头部均带有Cache-control: no-cache(为了兼容，还带了Pragma: no-cache),服务器直接返回 200 和最新内容。

    推荐阅读


    上一篇：QLPreviewController|QLPreviewController pdf 重复显示

    下一篇：对不起