如何防止CloudFront及浏览器缓存文件 解决Vue旧版本加载问题

先逐层定位缓存来源，再针对性修复，不要盲目改配置：

第一步：定位缓存层级 #

先把问题边界划清，避免无效调整：

• 直接访问S3静态网站托管端点的index.html路径，打开浏览器开发者工具Network面板，确认返回的是最新构建版本，同时检查响应头中Cache-Control值是否为你配置的内容。如果这里拿到的就是旧文件，说明S3部署环节有问题：要么新的index.html没上传成功，要么你在S3配置Cache-Control时没有覆盖已有对象的元数据，配置没生效。
• 用命令直接请求CloudFront端点查看源返回内容：执行curl -I https://你的CloudFront域名/index.html，查看响应头的X-Cache字段：
  • 如果值为Hit from cloudfront且返回内容是旧版本，说明旧缓存还存在CloudFront边缘节点，之前的失效操作未生效
  • 如果值为Miss from cloudfront且返回内容是新版本，但浏览器端加载仍为旧版，问题出在浏览器或中间链路缓存
• 浏览器端排查时，打开Network面板勾选「禁用缓存」后强制刷新（Ctrl+Shift+R / Cmd+Shift+R），如果能加载到新版本，确认是浏览器本地缓存问题；如果勾选禁用缓存仍拿到旧版本，检查是否存在公司代理、运营商缓存、本地安全软件的中间劫持缓存。

第二步：修复CloudFront侧常见配置问题 #

• 检查失效（Invalidation）规则是否正确：不要只配置/*就认为覆盖全量路径，CloudFront中/和/index.html是两个独立的缓存键，哪怕你配置了SPA路由重写，也要单独把/index.html加入失效路径。另外注意Invalidation是异步执行的，全节点生效通常需要5-15分钟，提交后不会立刻全量更新。如果开启了Origin Shield（源盾），还要额外等待源盾层的缓存失效，耗时会更长。
• 检查CloudFront缓存行为配置：不要用默认的*路径规则统一处理所有请求，单独为/index.html创建一条路径规则，将该规则的Default TTL、Max TTL全部设置为0，确保边缘节点不会长期缓存入口文件；其余带hash的静态资源（js/css/图片等，Vue构建后文件名自带内容hash）可以单独配置规则，TTL设置为31536000（1年）即可，这类资源内容变更后文件名会变化，不会出现版本冲突。同时检查缓存键配置，不要把无关参数加入缓存键，避免同一文件生成多个缓存变体导致失效不彻底。
• 检查响应头策略：确认CloudFront配置的Response headers policy没有覆盖源站的Cache-Control头，很多人配置了全局响应头强制给所有资源加长缓存，导致S3上给index.html配的不缓存规则被覆盖，实际返回给浏览器的是带长缓存的头。

第三步：修复浏览器侧常见问题 #

• 确认缓存头真实生效：在浏览器Network面板查看实际拿到的index.html响应头，不要以S3侧的配置为准，中间层（CloudFront、代理）都可能改写头信息，确保最终浏览器收到的Cache-Control值为no-cache, no-store, must-revalidate。
• 排查Service Worker缓存：如果Vue项目开启了PWA能力（Vite/Vue CLI配置了PWA插件），Service Worker会独立缓存静态资源，哪怕HTTP缓存头配置正确，SW仍可能返回旧版本资源。可以在浏览器开发者工具的Application-Service Workers面板，勾选Bypass for network测试，如果此时能加载到新版本，就需要调整SW逻辑：部署新版本时更新SW版本号，添加skipWaiting逻辑激活新SW，或者直接移除不需要的SW注册。
• 添加版本兜底校验：构建时将当前版本号写入index.html的meta标签，同时输出一个带版本号的version.json静态文件。页面加载后给version.json的请求加时间戳参数跳过缓存，对比返回的版本号和页面meta中存储的版本号，如果不一致就执行location.reload(true)强制拉取最新资源，跳过所有本地缓存，解决极端场景下的本地缓存不更新问题。

第四步：修正部署流程问题 #

• 调整部署顺序：先上传所有带内容hash的js/css/图片等静态资源，等待资源全部上传完成、CloudFront失效操作执行接近完成时，再上传最新的index.html文件。避免出现新的index.html已经发布，但引用的带新hash的静态资源还未上传，导致页面加载出错、触发浏览器回退旧缓存的问题。
• 如果使用Vue Router的history模式，确保路由重写规则不会对非文件路径的请求返回缓存的旧index.html，所有路由请求最终都要回源校验最新的入口文件。

内容的提问来源于stack exchange，提问作者Shahar Shamir