应将html设为不缓存（cache-control: no-cache, must-revalidate），单独配置cdn路径策略排除index.html，并确保构建后html中引用的js/css路径已更新为新哈希名。
CDN边缘节点缓存未更新，HTML页面还是旧的怎么办
不是 CDN 没生效，而是 HTML 文件本身被缓存了——绝大多数 CDN 默认对 index.html 设置极短缓存（Cache-Control: max-age=0 或 no-cache），但若你手动改过源站响应头、或用了错误的缓存策略，就可能卡在旧版本。
关键检查点：
- 用浏览器开发者工具 Network 面板看
index.html的响应头，确认Cache-Control是否含no-store或max-age=0；若看到max-age=3600，说明 CDN 正在缓存 HTML，必须调整 - 不要依赖「刷新页面」来验证：普通 F5 是条件请求（带
If-None-Match），可能返回304；应强制刷新（Ctrl+Shift+R）或清空浏览器缓存再测 - CDN 控制台中，
index.html必须单独配置为「不缓存」或「缓存 0 秒」；不能和.js、.css统一走「默认缓存规则」
JS/CSS 文件带哈希却仍加载旧版本，是CDN没刷新还是路径错了
大概率是路径没变，哈希只是文件内容指纹，但 HTML 里引用的仍是旧路径——比如构建后生成 app.abc123.js，但 index.html 里还写的是 app.def456.js。
常见诱因：
- 构建产物未上传到 CDN 源站，或上传目录错位（如把新
dist/传到/old/路径下） - HTML 中的 script src 写死绝对路径，未随构建自动替换（Webpack/Vite 需配
html-webpack-plugin或build.rollupOptions.output.assetFileNames） - CDN 缓存了旧 HTML，导致它持续加载旧哈希名的 JS；此时刷新 CDN 上的 HTML 文件比刷新 JS 更关键
- 检查浏览器 Network 面板里 JS 请求的 URL 是否真为新哈希名；如果不是，问题一定出在 HTML 渲染源头
如何让 HTML 自动校验自身引用资源的完整性
靠 integrity 属性 + 构建时注入哈希值，这是最轻量且浏览器原生支持的验证方式，不依赖 CDN 刷新机制。
实操要点：
- Webpack 用户可在
HtmlWebpackPlugin配置中启用integrity: true，Vite 用户需插件如vite-plugin-html或手动注入 - 生成的
<script></script>标签必须含integrity和crossorigin，例如：<script src="/app.a1b2c3.js" integrity="sha384-..." crossorigin></script> - 若资源加载失败（哈希不匹配），浏览器会直接抛
TypeError: Failed to fetch a script并中断执行——这比静默加载旧版更可控 - 注意：
integrity只校验传输完整性，不解决「该不该加载这个版本」的问题；版本决策仍需服务端配合（如通过 API 返回当前有效版本号）
Service Worker 与 CDN 缓存共存时的版本冲突怎么破
Service Worker 会劫持请求并可能返回已缓存的旧 HTML/JS，而 CDN 边缘节点又缓存了另一份——两者生命周期不同步，极易出现「用户看到的页面结构 vs 实际执行的 JS 逻辑」不一致。
稳妥做法：
- 避免 Service Worker 缓存
index.html：在 SW 的fetch事件中，对 HTML 请求直接return fetch(event.request)，不走 cacheFirst - JS/CSS 等静态资源可由 SW 缓存，但必须配合版本号或哈希命名，并在 activate 阶段清理旧缓存：
self.addEventListener('activate', e => e.waitUntil(caches.delete('old-cache'))) - 上线新版本前，先在 CDN 刷新所有静态资源 URL（URL 刷新比目录刷新快），再发新版 HTML；SW 激活后自然拉取新资源
- 别指望 SW 主动探测 CDN 是否更新——它只管自己 cache storage，CDN 状态对它不可见
真正麻烦的不是单点失效，而是 HTML 引用关系与 CDN 缓存状态、构建产物哈希、Service Worker 生命周期三者错位。每次发布前，必须同时验证 HTML 的响应头、引用路径、integrity 值、以及 SW 的缓存清单——少一个环节，就可能让用户卡在半新不旧的状态里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
