关键在于构建工具自动生成带哈希的资源清单并由service worker安装时精准加载：vue cli用@vue/cli-plugin-pwa默认generatesw模式生成precachemanifest，vite用vitepwa插件自动注入完整清单，异步路由分块文件（如js/user.a1b2c3.js）必须纳入预缓存，配合navigatefallback:'/index.html'与history模式实现离线路由访问。
Vue 应用要实现可靠预缓存，关键不是写死文件列表，而是让构建工具自动生成带哈希的资源清单，并由 Service Worker 在安装阶段精准加载。核心在于打通构建流程与运行时缓存逻辑。
确保构建产物含哈希并自动注入清单
异步路由（如 import('./views/User.vue')）在 Vue CLI 或 Vite 中会生成带内容哈希的 JS/CSS 分块文件（如 js/user.a1b2c3.js）。这些文件必须被纳入预缓存，否则离线访问对应页面会失败。
- Vue CLI 项目：启用 @vue/cli-plugin-pwa，它默认使用 GenerateSW 模式，自动扫描 dist 目录并生成包含所有静态资源的 precacheManifest
- Vite 项目：配置 VitePWA({ strategies: 'generateSW' })，插件会在构建后生成 service-worker.js 并注入完整资源清单
- 若需自定义逻辑（如过滤特定 chunk），改用 injectManifest 模式，在 src/service-worker.js 中调用 precacheAndRoute(self.__WB_MANIFEST) —— 这个 __WB_MANIFEST 是构建时由 Workbox 注入的数组，已含全部带哈希的产出路径
区分预缓存与运行时缓存
预缓存（Precache）发生在 Service Worker 安装阶段，用于保障核心静态资源离线可用；运行时缓存（Runtime Caching）则处理动态请求，如 API 调用或用户上传的图片。
- 预缓存对象通常包括：index.html、main.[hash].js、chunk.[hash].js、app.[hash].css、favicon.ico 等构建输出的本地资源
- 运行时缓存需单独配置：例如对 API 请求使用 StaleWhileRevalidate，对用户头像等资源使用 CacheFirst，避免把接口响应误加入预缓存清单
- 不要在预缓存中写死 URL，比如 '/about' 或 '/api/user' —— 这些是导航或接口地址，不是可缓存的文件
导航请求必须兜底到 index.html
用户直接输入 /user 或刷新该页面时，浏览器发起的是 navigation 类型请求（MIME 为 text/html），而非 JS 请求。此时若未命中缓存，Service Worker 必须将其 fallback 到 /index.html，交由 Vue Router 处理前端路由。
- 在 Workbox 配置中设置 navigateFallback: '/index.html'
- Vue Router 必须启用 history 模式（非 hash）
- 服务端（Nginx/Apache）需配置回退规则，例如 Nginx 的 try_files $uri $uri/ /index.html，确保首次访问 /user 时返回 index.html 内容
验证与常见陷阱
预缓存是否生效不能只看控制台日志，需结合 DevTools 的 Application → Cache Storage 和 Network 面板交叉验证。
- 检查 Cache Storage 中是否有名为 workbox-precache-... 的缓存，点开确认是否包含所有预期的 JS/CSS 文件
- 断网后访问首页再跳转到 /about，观察 Network 面板中 JS 请求是否来自 from ServiceWorker，且状态码为 200
- 避免在开发环境测试预缓存效果——Vue CLI 的 dev-server 默认不启用 SW；务必在 dist 部署后测试
- 注意版本更新：新 Service Worker 安装后，旧标签页仍使用旧缓存，需配合 skipWaiting 和 clientsClaim 实现静默接管
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
