nginx 中通过 location 块匹配 .css 文件并用 expires 指令设置缓存（如 expires 1y），配合 add_header cache-control "public, immutable"，需结合文件哈希版本控制避免缓存失效问题，并区分静态资源与动态/开发环境 css。
Nginx 中通过 expires 指令可以为 CSS 文件等静态资源设置 HTTP 缓存头（Cache-Control 和 Expires），让浏览器缓存资源，减少重复请求，提升页面加载速度。
匹配 CSS 文件并设置缓存时间
通常在 location 块中针对 .css 后缀做匹配，并用 expires 指令指定缓存时长。例如：
location ~* \.css$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
其中 expires 1y 表示缓存有效期为 1 年；add_header 补充了更现代的 Cache-Control 策略，immutable 可避免浏览器在 max-age 内发起条件请求。
注意缓存策略与版本控制配合
直接设长缓存对 CSS 有风险：文件内容更新后，用户可能因缓存未过期而加载旧样式。推荐做法是：
- 给 CSS 文件名添加哈希后缀（如
style.a1b2c3.css），构建工具（Webpack/Vite）可自动实现 - HTML 中引用带哈希的文件，内容变则文件名变，浏览器视为新资源重新下载
- 此时
expires 1y安全有效，无需担心缓存不更新
避免对动态 CSS 或调试环境误设缓存
如果项目中有内联 CSS、开发阶段的热更新 CSS，或通过 PHP/Node 动态生成的 CSS，不应统一加长缓存。建议：
- 用更精确的 location 匹配（如限定在
/static/或/dist/目录下） - 开发环境配置中注释或禁用
expires指令 - 必要时用
expires -1或expires epoch禁用缓存（返回Cache-Control: no-cache）
验证缓存头是否生效
部署后可通过浏览器开发者工具的 Network 面板检查 CSS 请求响应头：
- 查看
Cache-Control是否包含max-age=31536000（对应 1y） - 确认
Expires时间是否为当前时间 + 缓存周期 - 刷新页面时，状态码应为
200 (from disk cache)或304 Not Modified（取决于是否启用 ETag/Last-Modified）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
