核心解法是：HTML文件强制不缓存，带哈希的静态资源启用1年强缓存并加immutable标识，前端路由通过try_files回退至匹配哈希名的index.html。需精准正则匹配哈希文件、避免规则覆盖，并实测响应头验证。
核心思路是：让带哈希的静态资源走强缓存，HTML 文件强制不缓存，并确保所有前端路由请求都能回退到正确的 index.html（含哈希名）。
一、静态资源启用长缓存 + immutable 标识
JS、CSS、图片等构建后带哈希的文件，内容不变则路径不变，适合长期缓存。Nginx 需明确识别这些后缀并设置响应头：
- 在 location 块中匹配常见静态资源后缀，例如：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
} - immutable 是关键——它告诉浏览器“这个资源只要 URL 没变，内容就绝不会变”，可绕过条件请求（如 If-None-Match），大幅提升复用率
- 避免把 HTML 或 JSON 接口误配进该规则，否则会引发版本错乱
二、HTML 文件必须禁用缓存
index.html 是入口，它内部引用的 JS/CSS 路径随每次构建变化。一旦被缓存，用户加载的仍是旧 HTML，就会去请求已失效的老哈希资源，导致白屏或功能异常。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 对根路径显式处理：
location = / {
try_files /index.html =404;
add_header Cache-Control "no-cache, no-store, must-revalidate";
} - 同时覆盖所有 .html 请求：
location ~* \.html$ {
add_header Cache-Control "no-cache";
} - 注意检查是否被其他 include 配置覆盖（比如某些框架自动生成的 conf）
三、精准匹配带哈希的 index.html 文件
构建产物中 index.html 实际为 index.a1b2c3d4.html 等形式，传统 index index.html 或 try_files ... /index.html 会失败。需用正则动态定位：
- 推荐配置（简洁可靠）：
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ @index;
}
location @index {
rewrite ^/(.*)$ /index\.[0-9a-f]{8,}\.html break;
try_files $uri =404;
} -
rewrite 中的 [0-9a-f]{8,} 匹配至少 8 位哈希（适配 Webpack/Vite 默认长度），比
.*更安全，避免误匹配其他文件 - 该逻辑只在常规文件/目录未命中时触发，不影响 JS/CSS 的强缓存路径
四、验证与常见陷阱
上线后务必实测，仅看配置不能保证生效：
- 打开 Chrome DevTools → Network → 刷新页面，检查：
– index.html 响应头 是否含Cache-Control: no-cache
– app.xxx.js 响应头 是否含immutable且Expires为 1 年后 - 手动改一行 HTML 内容、重新打包部署后，清空浏览器缓存再访问 —— 若仍显示旧页面，说明 HTML 缓存未生效，重点查 Nginx 配置加载顺序和 location 优先级
- SPA 回退配置（
try_files $uri $uri/ /index.html）必须放在静态资源 location 之后，否则 js/css 请求会被错误 fallback，跳过强缓存
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
