HTML中meta标签无法禁用index.html缓存，因现代浏览器完全忽略meta http-equiv="Cache-Control"；真正有效的是服务端HTTP响应头，如Nginx精确匹配location = /index.html并配置no-store等指令。
index.html 不能靠 HTML 里的 <meta> 标签禁用缓存——现代浏览器完全忽略 meta http-equiv="Cache-Control" 这类写法。真正起作用的，只有服务端返回的 HTTP 响应头。
为什么 <meta> 标签在 index.html 里无效？
Chrome、Firefox、Edge 等主流浏览器自多年前起就不再解析 <meta http-equiv="Cache-Control"> 对 HTML 的缓存控制指令。它只对极少数旧版 IE 有过有限支持。DevTools Network 面板里能看到：即使写了这些 <meta>，index.html 的响应头里依然没有 Cache-Control 或 Pragma，浏览器照常缓存。
常见错误现象：
- 改完 Vue/React 项目重新部署，用户刷新页面还是旧版（白屏或功能异常）
- 明明在
public/index.html里加了no-cachemeta，Network 面板里index.html仍显示from memory cache - 强制刷新（Ctrl+Shift+R）能临时解决，但普通刷新（F5）又复现问题
Nginx 中正确配置 index.html 不缓存
最常用也最可靠的方案是修改 Nginx 配置，精准匹配 /index.html 路径并注入禁止缓存头：
立即学习“前端免费学习笔记（深入）”；
location = /index.html {
add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
# 可选：避免 Last-Modified 被省略导致协商缓存误触发
add_header Last-Modified $date_gmt;
}关键点：
- 必须用
location = /index.html（等号精确匹配），不能写location ~* \.html$，否则会误伤其他 HTML 文件 -
no-store是最彻底的选项，确保浏览器不存任何副本；no-cache仍会缓存但每次强制校验（可能返回 304），对 SPA 风险更高 - 别漏掉
Pragma和Expires，部分老旧代理或企业网关会依赖它们 - 静态资源（
.js、.css、图片）应单独配置长期缓存，例如expires 1y;
Vercel / Netlify 等托管平台怎么配？
这些平台不让你直接改服务器配置，但都支持通过配置文件声明响应头：
Vercel（vercel.json）：
{
"headers": [
{
"source": "/index.html",
"headers": [
{"key": "Cache-Control", "value": "no-store, no-cache, must-revalidate, proxy-revalidate"},
{"key": "Pragma", "value": "no-cache"},
{"key": "Expires", "value": "0"}
]
}
]
}Netlify（netlify.toml）：
[[headers]]
for = "/index.html"
[headers.values]
Cache-Control = "no-store, no-cache, must-revalidate, proxy-revalidate"
Pragma = "no-cache"
Expires = "0"注意：
- 配置后需重新部署，且要确认生效——打开 DevTools Network，刷新
index.html请求，检查 Response Headers 是否包含上述字段 - Netlify 的
[[headers]]匹配是前缀式，for = "/index.html"是精确匹配，没问题；但不要写成for = "/"，否则整站都受影响
验证是否真的没缓存？看 DevTools 的 Size 列和状态码
别信“我清过缓存了”，以 Network 面板为准：
- 如果
index.html的Size显示from memory cache或from disk cache→ 还在缓存，配置没生效 - 如果显示具体字节数（如
2.4 KB）且状态码是200→ 每次都从服务端拉取，成功 - 如果状态码是
304→ 说明用了no-cache而非no-store，浏览器仍发请求校验，SPA 场景下容易因 JS/CSS 版本不一致导致白屏
普通刷新（F5）才走真实缓存逻辑；Ctrl+Shift+R 是强制跳过所有缓存，不能用来验证配置效果。
最容易被忽略的一点：很多团队只配了 Cache-Control: no-cache，却没意识到它仍允许浏览器缓存并发起条件请求——对单页应用来说，只要 index.html 缓存了旧版本，哪怕 JS 已更新，也会加载错的入口逻辑。必须用 no-store 才算真正切断风险链。
