spa生产环境需精准缓存控制：index.html必须每次校验，配置location = /index.html并添加no-cache等三重头；带哈希的静态资源启用1年强缓存，加immutable避免协商请求。
让 index.html 永不缓存、静态资源强缓存，是 SPA 在生产环境稳定更新的核心前提。关键不是“全禁”或“全开”，而是按角色精准控制：HTML 是版本入口，必须每次校验；JS/CSS 等带哈希的文件，内容不变 URL 就不变，完全可以放心长期缓存。
为 /index.html 单独配置强制不缓存
不能靠 location ~* \.html$ 这类泛匹配，必须精确到文件本身，避免误伤其他 HTML 页面：
- 用 location = /index.html 做精确匹配
- 添加三重保险头：Cache-Control: no-cache, no-store, must-revalidate（禁用所有层级缓存）
- 补上 Pragma: no-cache 和 Expires: 0，兼容老旧代理和浏览器
- 加上 Vary: Accept-Encoding，防止 gzip/brotli 版本被混用
对带哈希的静态资源启用 1 年强缓存
前提是构建工具（如 Vite、Webpack）已开启 contenthash，生成类似 app.a1b2c3.js、style.d4e5f6.css 这样的文件名：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 匹配常见后缀：location ~* \.(js|css|png|jpg|jpeg|gif|woff2|ttf|eot|svg)$
- 设置 expires 1y，自动注入 Cache-Control: public, max-age=31536000
- 务必加上 add_header Cache-Control "immutable" —— 它告诉浏览器：“这个 URL 的内容这辈子都不会变”，彻底跳过 If-None-Match 验证，减少协商请求
避免常见陷阱
配置看似简单，但几处细节错一点，就可能引发白屏或样式错乱：
- 不要在 location / 块里直接写 add_header Cache-Control —— 它会覆盖子 location 的头，导致 index.html 缓存策略失效
- API 接口路径（如 /api/）必须单独声明并 proxy_pass，且要写在 location / 之前，否则会被 try_files 错误兜底到 index.html
- 确认构建产物中 index.html 真实存在，且 Nginx 的 root 路径指向正确目录 —— 常见错误是 root 多了一层或少了一层
- 不推荐用 max-age=0 替代 no-cache，前者仍可能触发冗余验证逻辑，语义也不如 no-cache 明确
附：最小可用配置片段
可直接嵌入 server 块中（注意顺序）：
location = /index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
add_header Vary "Accept-Encoding";
}
<p>location ~* .(js|css|png|jpg|jpeg|gif|woff2|ttf|eot|svg)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}</p><p>location / {
try_files $uri $uri/ /index.html;
}</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
