Vue 3浏览器缓存无法获取最新构建文件引发加载报错问题咨询

这个问题的核心诱因有两个：一是Service Worker的缓存兜底逻辑缺失，二是入口HTML的缓存策略配置错误，两层缓存叠加就会出现旧路径资源请求失败、浏览器不会主动拉取新版本资源的问题。

• 优先修复Service Worker逻辑
  你贴的报错里明确提到Service Worker拦截了请求，这是问题的核心触发点：当前Service Worker大概率用了缓存优先策略，请求旧版本动态路径资源返回404时，没有做降级处理，直接抛出错误，根本不会触发浏览器原生的网络请求去拉新资源。按下面改就行：
  1. 改build.js构建逻辑：每次构建时在dist根目录生成固定路径的version.json，文件内容只存本次生成的动态文件夹名称，比如本次动态目录是abcxy，文件内容就写{"dynamicDir": "abcxy"}，这个文件路径永远不变。
  2. 给Service Worker加版本校验逻辑：Service Worker激活时先请求这个version.json，和本地缓存里存的上次dynamicDir值对比，如果不一致直接全量清空旧的静态资源缓存，然后主动触发页面重载，拉取最新的入口资源。
  3. 给fetch事件加兜底：如果缓存匹配不到资源、或者网络请求返回404状态，直接清除对应旧缓存，触发页面重载，不要直接抛出错误。
• 修正静态资源缓存策略
  入口HTML被强缓存是另一个诱因：如果浏览器缓存了旧版本的index.html，里面引用的还是上一次构建的动态路径（比如报错里的pbtsg），自然会请求不存在的旧地址。给服务器配对应响应头：
  • 根目录的index.html、sw.js、version.json这三个固定路径的文件，配置响应头Cache-Control: no-cache, no-store, must-revalidate，完全禁用强缓存，每次访问都向服务器校验最新版本。
  • dist/src/[动态文件夹名]/路径下的所有js、css、图片等静态资源，可以直接配置Cache-Control: max-age=31536000, immutable开长期强缓存，因为每次构建动态目录名都会变，不会出现新旧版本路径冲突的问题，也不会影响新版本加载。
• 补构建脚本的清理逻辑
  改build.js的清理逻辑：每次构建前不要全量清空dist目录，只删除上一次构建生成的旧动态文件夹即可，保留根目录下的固定文件，避免旧版本资源残留导致缓存匹配混乱。

你遇到的报错Failed to load ‘http://localhost/src/pbtsg/components/report/reports.js’. A ServiceWorker intercepted the request and encountered an unexpected error. 是典型的Service Worker未做404降级的错误，优先处理Service Worker逻辑就能解决绝大多数场景的问题。

内容的提问来源于stack exchange，提问作者Anveeg Sinha