应为图片和css设置浏览器端cache-control强缓存与nginx proxy_cache磁盘缓存两级协同机制：对带哈希资源设max-age=31536000且immutable，无哈希资源设max-age=604800；proxy_cache需配合proxy_pass及内部location实现磁盘读取与响应缓存，并通过x-cache-status验证命中状态。
直接在 location 块中为图片和 CSS 文件设置两级缓存：浏览器端用 Cache-Control 强缓存，Nginx 服务端用 proxy_cache 磁盘缓存。关键不是“只配一个”，而是让两者协同不冲突。
浏览器端缓存：靠响应头控制长期复用
对带构建哈希的资源（如 app.a1b2c3.css、logo.f45678.png），加不可变强缓存：
add_header Cache-Control "public, max-age=31536000, immutable" always;expires 1y;-
always参数确保 304 或错误响应也带上该头，避免策略漏生效
若资源没哈希（如第三方库或手动维护的 main.css），改用中期缓存：
-
add_header Cache-Control "public, max-age=604800";（7 天） - 不加
immutable，防止内容更新后用户卡在旧版本
Nginx 服务端缓存：用 proxy_cache 减少文件系统压力
注意：proxy_cache 不能和 root 或 alias 直接共用，必须配合 proxy_pass。推荐用内部命名 location 实现：
- 在
http块定义缓存区：proxy_cache_path /var/cache/nginx/img_css levels=1:2 keys_zone=img_css:50m max_size=5g inactive=30d use_temp_path=off; - 在
server中配置：location ^~ /static/ {<br> proxy_pass http://_internal_static_;<br> proxy_cache img_css;<br> proxy_cache_valid 200 302 1h;<br> add_header X-Cache-Status $upstream_cache_status;<br>} - 再定义内部 location：
location @static_disk {<br> root /var/www/static;<br> try_files $uri =404;<br>}
这样既满足语法要求，又真正从本地磁盘读取文件并缓存响应体。
避坑要点：location 优先级与调试验证
常见失效原因是高优先级 location ^~ /static/ 拦截了正则匹配，导致缓存头没加上。解决方法：
- 把
add_header和proxy_cache配置直接写进那个前缀 location 块里 - 用
nginx -T查看最终生效的配置顺序 - 通过响应头
X-Cache-Status判断是HIT、MISS还是BYPASS - 确认 CDN 回源时是否尊重源站的
Cache-Control，否则 Nginx 缓存再好也没用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
