前端文件加hash后nginx需特别配置，因需区分缓存策略：js/css等带hash资源设长缓存（1年+immutable），html必须禁用缓存（no-cache）；同时用try_files回退至index.html支持spa路由，且location顺序须确保静态资源不被错误fallback。
为什么前端文件加 Hash 后 Nginx 要特别配置？
前端构建（如 Webpack、Vite）生成带 Hash 的静态资源（app.a1b2c3.js、style.e4f5g6.css），本质是让浏览器缓存长期有效，同时确保更新后能加载新版本。但默认 Nginx 不会自动识别这些文件名变化，若缓存策略写死或路径匹配不精准，容易出现：旧 HTML 引用新 Hash 文件却返回 404，或浏览器缓存了过期的 index.html 导致 JS/CSS 加载失败。
关键一：静态资源走强缓存，HTML 禁用缓存
Nginx 应区分处理：带 Hash 的 JS/CSS/图片等资源可缓存一年甚至永久；而 index.html 必须每次拉取最新版，否则它里面引用的资源路径就可能失效。
- 在 server 或 location 块中匹配静态资源后缀，设置长缓存：
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
- 对根路径或 HTML 显式禁用缓存：
location = / {
try_files /index.html =404;
add_header Cache-Control "no-cache, no-store, must-revalidate";
}
location ~* \.html$ {
add_header Cache-Control "no-cache";
}
关键二：启用 try_files + SPA 回退，避免 Hash 变更导致 404
单页应用（SPA）常配合前端路由，用户直接访问 /user/profile 时，Nginx 若未配置回退，会尝试找对应路径的物理文件并返回 404。加上 Hash 后，构建产物目录结构固定（如所有资源都在 /dist/ 下），但 HTML 入口始终是 /index.html —— 所以需确保任意非资源请求都 fallback 到 index.html，由前端路由接管。
- 标准 SPA 回退配置（放在 root 目录 location 中）：
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html;
}
- 注意：该配置要放在静态资源 location 之后，否则 js/css 请求会被错误 fallback，绕过强缓存
关键三：验证与排查技巧
上线后快速确认是否生效：
- 打开浏览器开发者工具 → Network 标签 → 刷新页面 → 查看 index.html 的 Response Header 中 Cache-Control 是否为 no-cache；查看 app.xxx.js 的 Cache-Control 是否含 immutable，Expires 是否为 1 年后
- 手动修改 index.html 内容、重新打包部署后，清空浏览器缓存再访问 —— 若仍看到旧页面，说明 HTML 被缓存了，检查 Nginx 配置是否被覆盖（如 include 多个 conf 时顺序错）
- 故意访问一个不存在的哈希文件（如 app.invalidhash.js），应返回 404；若返回 index.html，则说明 try_files 位置不对，需调整 location 优先级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
