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

场景

由于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写个过滤器:

前端应用部署后页面缓存问题的解决_第1张图片

注意:路径要和第三步的配置保持一致

2、然后我们把这个过滤器打成jar包,名字随便,放在tomcat/lib目录下即可。

3、最后,我们需要修改配置文件tomcat/conf/web.xml,在末尾的上方增加以下代码:

前端应用部署后页面缓存问题的解决_第2张图片

MyFilter是你给过滤器起的名字,可随便改

也没有太麻烦,应该大部分同学都能搞定。

4、ctrl+f5强制刷新浏览器,这是对于用电脑浏览器的用户来说

强制刷新 (Ctrl + F5):浏览器不使用缓存,因此发送的请求头部均带有Cache-control: no-cache(为了兼容,还带了Pragma: no-cache),服务器直接返回 200 和最新内容。

你可能感兴趣的:(前端应用部署后页面缓存问题的解决)