浏览器未发请求导致index.html修改无效，需绕过缓存：开发阶段用devtools禁用缓存（network面板勾选disable cache），服务端配置cache-control响应头，同时排查cdn和service worker拦截。
开发时改了 index.html 却看不到效果，不是你代码写错了，而是浏览器根本没发请求——它直接从磁盘或内存里读了旧文件。解决这事得绕过缓存机制本身，而不是等它“过期”。
用 DevTools 禁用缓存（开发阶段最稳的方案）
这是唯一不需要改代码、不依赖服务端、且覆盖所有资源类型（HTML/CSS/JS/图片/API）的方法。关键点在于：它只在开发者工具开启且 Network 面板激活时生效，关掉就自动恢复，零风险。
- 打开页面后按
Ctrl + Shift + I（Windows/Linux）或Cmd + Option + I（macOS）调出 DevTools - 切到
Network标签页，勾选Disable cache - 此时刷新（
F5或Ctrl + R），所有请求都会带Cache-Control: no-cache和Pragma: no-cache，强制走网络 - 注意：如果切换标签页或关闭 DevTools，这个设置就失效；别指望它在后台长期起作用
服务端设响应头（适合多设备联调或自动化测试）
当你要让同事扫码看最新版、或者跑 CI 环境下的 E2E 测试时，仅靠前端禁用缓存不够。必须让服务器明确告诉浏览器：“这个 HTML 别缓存”。但要注意，no-store 会杀死首屏性能，别乱用。
- PHP 项目：在
index.php或入口逻辑顶部加三行（输出任何内容前）：header('Cache-Control: no-cache, must-revalidate, max-age=0'); header('Expires: Mon, 01 Jan 1990 00:00:00 GMT'); header('Pragma: no-cache'); - Nginx 静态部署：针对
/index.html单独配 location，避免被全局缓存规则兜底：location = /index.html { add_header Cache-Control "no-cache, must-revalidate"; } - 别写
no-store：它会让浏览器完全跳过缓存存储，每次都要重拉整个 HTML，实测首屏加载慢 30%+
CDN 和 Service Worker 是真·隐藏杀手
本地禁用缓存、服务端也配了头，结果真机上还是旧页面？大概率是 CDN 或已注册的 Service Worker 在中间截胡。它们不看你 DevTools 设置，也不认 PHP 的 header()，只认自己那一套缓存逻辑。
- 查 CDN 是否命中：打开 Network 面板，看
index.html请求的响应头里有没有x-cache: HIT（Cloudflare）或x-cdn-cache: HIT（阿里云）。有就说明 CDN 缓了，得去控制台把/index.html路径设为“不缓存”或 TTL=0 - Service Worker 拦截了：访问
chrome://serviceworker-internals/，找到对应域名，点Unregister+Skip Waiting；开发阶段建议在 SW 安装逻辑里加caches.delete('old-cache-name')清旧缓存 - 别信
Ctrl + F5：它只绕过浏览器本地缓存，对 CDN、SW、Nginx proxy_cache 全无效
真正难搞的从来不是 HTML 文件本身，而是它被哪几层缓存同时锁死。调试时先盯死 Network 面板里的响应头和 x-cache 字段，再决定该动 DevTools、服务端配置，还是去 CDN 后台删缓存——顺序错了，改半天也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
