Nginx中JS/CSS强制刷新缓存的关键是让浏览器加载新版本，核心方案是构建工具生成带内容哈希的文件名（如app.a1b2c3d4.js），配合长缓存头；次选方案为查询参数（如?v=2.1.0）或Nginx精准设置Cache-Control与expires。
在Nginx中让JS/CSS等静态资源强制刷新缓存，核心不是“清空服务器缓存”，而是让浏览器放弃旧缓存、主动请求新版本。关键在于控制HTTP响应头，并配合前端资源命名策略。
利用版本号或哈希值重命名文件
这是最可靠、推荐的方案。构建工具（如Webpack、Vite）可自动生成带内容哈希的文件名，例如：
app.a1b2c3d4.js、style.e5f6g7h8.css。
只要文件内容变化，哈希就变，URL自然不同，浏览器会当作全新资源加载，完全绕过缓存问题。
- 无需改Nginx配置，也不依赖时间戳或查询参数
- 支持长期强缓存（如
Cache-Control: public, max-age=31536000），兼顾性能与更新及时性 - 需确保HTML中引用的路径同步更新（构建工具通常自动处理）
通过查询参数触发更新（临时方案）
开发或简单部署时，可在HTML中手动添加版本参数，例如：
<script src="/js/app.js?v=2.1.0"></script>
Nginx默认不会因查询参数改变而跳过缓存（除非显式配置），但多数浏览器会将其视为不同URL，从而重新请求。
- 注意：CDN或代理层可能忽略查询参数，导致无效；不建议用于生产环境
- 若必须用，可在Nginx中添加
expires off;或禁用对带v=的静态资源的缓存
精准控制Nginx缓存响应头
在server或location块中，针对JS/CSS设置明确的缓存策略：
立即学习“前端免费学习笔记（深入）”；
- 对已启用哈希命名的资源，设长缓存：
location ~* \.(js|css)$ {<br> expires 1y;<br> add_header Cache-Control "public, immutable";<br>} - 对未哈希、需频繁更新的资源（如开发环境），禁用缓存：
location ~* \.(js|css)$ {<br> expires -1;<br> add_header Cache-Control "no-cache, must-revalidate, max-age=0";<br>} - 避免仅用
max-age=0，它仍可能触发条件请求（If-None-Match）；no-cache更明确要求校验
刷新后验证是否生效
别只看HTML源码，重点检查浏览器开发者工具的Network面板：
— 查看JS/CSS请求的Status是否为200（而非304）；
— 检查Response Headers中 Cache-Control 和 ETag 是否符合预期；
— 确认响应体内容确实是最新版本（可比对本地文件）。
- 清除浏览器缓存或使用无痕窗口测试更准确
- 如果用了CDN，还需单独刷新CDN节点缓存
