admin管理员组文章数量:1530941
一、场景:页面功能不可用,打开控制台发现js静态资源找不到,见下图
二,分析:可能是由于Nginx上发布了新版本,而浏览器存在缓存,此次操作仍然请求的是原来的静态资源。
ps:什么情况用缓存,什么情况会更新?
js文件比如叫做http://xxx.aaa/hello.js
,如果更改了hello.js
又想让浏览器不要使用缓存而是加载你新的文件,那么就加一个参数,文件地址变成http://xxx.aaa/.js?v=111
,这样浏览器就理解为2个不同的文件了,就不会直接调用缓存的js文件,而是加载新更改的文件了。
而该项目前端基于vue-cli,vue-cli默认配置css和js的名字都加了哈希值,所以服务器上新版本的css、js就和旧版本的名字是不同的,浏览器会加载新更改的文件。
不过,打包后的index.html放到服务器里去的时候,由于没有哈希值或其他标识,浏览器判断该文件没有变化,使用的是缓存的index.html,(考虑Last-Modified/ETag)而css和js却加载了更新后的,导致控制台里报错(找不到js文件)
三、解决办法:需要在服务器配置不让缓存index.html
以nginx为例:
location = /index.html {
add_header Cache-Control "no-cache, no-store";
}
ps: 可以控制HTTP应答中的“Expires”和“Cache-Control”的头标(起到控制页面缓存的作用)。不过Expires 是HTTP 1.0的东西,现在默认浏览器均默认使用HTTP 1.1,所以它的作用基本忽略
Cache-Control 是最重要的规则。常见的取值有private、public、no-cache、max-age,no-store,默认为private。
private: 客户端可以缓存
public: 客户端和代理服务器都可缓存(前端的同学,可以认为public和private是一样的)
max-age=xxx: 缓存的内容将在 xxx 秒后失效
no-cache: 需要使用对比缓存来验证缓存数据(后面介绍)
no-store: 所有内容都不会缓存,强制缓存,对比缓存都不会触发(对于前端开发来说,缓存越多越好,so...基本上和它说886)
例如 js css缓存一小时:
location ~.*\.(js|css)?$
{
add_header Cache-Control max-age=3600;
}
彻底弄懂HTTP缓存机制及原理
https://wwwblogs/chenqf/p/6386163.html
版权声明:本文标题:浏览器静态资源缓存问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1725797655a1043175.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论