Vue项目离线缓存异步路由需预缓存带哈希的JS/CSS分块文件，并配置navigateFallback至/index.html，配合history模式与前端路由兜底，确保断网时仍可访问/about等页面。
在 Vue 项目中实现路由包（即按需加载的异步路由组件，如 import('./views/About.vue')）的离线缓存，核心不是缓存“路由本身”，而是缓存它所依赖的**分块文件（chunk）**——包括 JS chunk、CSS chunk 及其关联的静态资源。Service Worker 需识别并预缓存这些动态生成的构建产物，并配合 Vue Router 的导航兜底机制，才能让用户断网后仍能访问 /about、/user 等页面。
识别并预缓存路由 chunk 文件
Vue CLI 或 Vite 构建时，异步路由会自动拆分为带哈希名的独立 JS/CSS 文件（如 js/about.abc123.js）。这些文件必须被 Service Worker 显式纳入预缓存（Precache），否则首次离线访问时 fetch 会失败。
- 使用 Workbox InjectManifest 模式：在
vue.config.js（Vue CLI）或vite.config.ts（Vite）中配置workboxPluginMode: 'InjectManifest'，指向自定义的src/service-worker.js - 在
src/service-worker.js中调用precacheAndRoute(self.__WB_MANIFEST)—— 这个__WB_MANIFEST是构建时由 Workbox 自动注入的，已包含所有产出的 chunk 文件路径（含哈希） - 确保
public/index.html引入了注册逻辑（Vue CLI 默认已配好registerServiceWorker.js）
配置导航请求兜底（关键！）
用户直接访问 /about 或刷新该页面时，浏览器发起的是 navigation 请求（MIME 类型为 text/html），而非 JS 请求。若未命中缓存，Service Worker 必须将其 fallback 到 /index.html，交由 Vue Router 处理前端路由。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在 Workbox 配置中启用
navigateFallback: '/index.html' - Vue Router 必须使用
history模式（非hash），且服务端已配置回退规则（如 Nginx 的try_files $uri $uri/ /index.html） - 避免将
/about当作 API 缓存——它不是接口，不能走StaleWhileRevalidate；它必须靠navigateFallback+ 预缓存 chunk 共同支撑
处理 chunk 加载失败的降级提示
即使 chunk 已预缓存，若用户首次访问时网络中断，而 JS chunk 尚未完成安装，仍可能白屏或报错。建议增强健壮性：
立即学习“前端免费学习笔记（深入）”；
- 在路由组件中使用
defineAsyncComponent的error选项，显示友好提示（如“内容加载中，请检查网络”） - 监听
navigator.onLine变化，在离线时禁用跳转按钮或添加离线标识 - Service Worker 的
install事件中可添加日志，确认所有 chunk 是否成功加入 cache
验证与调试要点
仅靠代码配置不够，必须实测验证是否真正生效：
- 打开 Chrome DevTools → Application → Service Workers，勾选 Update on reload 和 Offline
- 首次联网访问 /about，触发 chunk 下载与缓存；然后断网，刷新页面——应正常渲染，Network 面板显示 status
from ServiceWorker - 查看 Cache Storage → 对应 cache 名称，确认存在类似
js/about.abc123.js的条目 - 若失败，检查控制台是否有
Failed to load resource: net::ERR_FAILED，大概率是 chunk 未进 manifest 或 navigateFallback 未生效
