当前位置: 首页 > Web前端 > vue.js

index.html缓存导致加载不是最新的文件,解决方法

时间:2023-03-31 22:52:16 vue.js

环境:前端单页(Vue)+Nginx问题:http://xxx.com/a/访问会跳转到http://xxx.com/a/下索引,代码已更新.访问http://xxx.com/a/Index获取完整链接。index.html加载是最新的。访问http://xxx.com/a/读取磁盘缓存的内容。导致加载的页面不是最新的。让用户不清除缓存来显示内容是错误的。解决方法:在nginx下配置no-cache和no-store例子:location/a{add_headerCache-Control'no-cache,no-store,must-revalidate,proxy-revalidate,max-age=0';}no-cache:可以缓存在本地,也可以缓存在代理服务器上,但是这个缓存需要经过服务器验证后才能使用。index.html没有变化,浏览器状态码为304。no-store:本地和代理服务器不缓存,每次都从服务器获取。index.html状态码始终为200。must-revalidate:缓存在使用旧资源之前必须验证其状态,过期的资源不能使用。表示如果页面过期,去服务器获取。proxy-revalidate:同must-revalidate,但只适用于共享缓存(如proxies),被私有缓存忽略。max-age=:设置缓存存储的最大期限,超过这个期限缓存被认为过期(以秒为单位)。与Expires相反,时间是相对于请求的时间。max-age将覆盖Expires。在chrome网络上查看请求的资源,发现浏览器缓存有3种情况。内存缓存不访问服务器,直接读取缓存。从内存中读取,一般缓存资源少的图片等,浏览器关闭时数据不会再关闭。磁盘缓存不访问服务器,直接读取缓存,从磁盘中读取缓存。当进程被杀死时,数据仍然存在。一般资源大的js、css都会缓存起来。304当访问服务器发现数据没有更新时,服务器返回该状态码。然后从缓存中读取数据。参考:https://www.zhihu.com/question/64201378https://blog.csdn.net/zs343961443/article/details/87258217