vue 3 中 axios 离线缓存核心是拦截请求、检测网络、读取缓存、控制时效；推荐用 localstorage/indexeddb 存字典类数据，写入带时间戳与过期时间，读取前校验；结合 service worker 可实现真正离线可用。

Vue 3 中 Axios 实现离线缓存，核心不是让 Axios 自己“记住”数据，而是把它作为请求入口，配合本地存储 + 拦截逻辑，在网络不可用时自动 fallback 到缓存数据。关键在于：**拦截请求、检测网络状态、读取缓存、控制缓存时效**。

用 localStorage / IndexedDB 存接口数据

适合缓存字典、用户信息、省市区等变动少、体积适中的数据。不推荐存大量列表或频繁更新的内容。

• 每次成功响应后，把 data 和时间戳一起存进 localStorage（或更健壮的 IndexedDB）
• 缓存 key 建议包含 URL + 序列化参数，例如：cache:GET:/api/user?uid=123
• 写入时附带过期时间，比如 { data: res.data, timestamp: Date.now(), expires: 10 * 60 * 1000 }（10 分钟）
• 读取时先校验是否过期，过期则忽略，避免返回陈旧数据

在请求拦截器里做“网络兜底”

利用 Axios 请求拦截器统一判断网络状态，并决定走网络还是读缓存。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 用 navigator.onLine 快速判断浏览器是否认为在线（注意：它只反映系统级连接，不能替代真实请求测试）
• 更稳妥的做法是：首次请求失败后标记为“疑似离线”，后续请求优先查缓存；或对关键接口加超时 + catch 后尝试读缓存
• 示例逻辑（简化版）：

if (!navigator.onLine) {
  const cache = getCachedData(config);
  if (cache && !isExpired(cache)) return Promise.resolve({ data: cache.data });
}

结合 Service Worker 实现静态资源+接口离线可用

如果需要真正可靠的离线体验（比如整个页面可打开、接口能响应），必须引入 Service Worker。

• 用 Workbox 或手写 SW，在 install 阶段预缓存 HTML/CSS/JS 等静态资源
• 在 fetch 事件中拦截 API 请求，命中缓存就返回，未命中则 fetch 并存入 Cache Storage
• Axios 发出的请求会被 SW 拦截，无需改 Vue 代码，但需确保请求地址是同源且非 no-store
• 注意：SW 缓存的是 Response 对象，需用 caches.match() + response.clone().json() 解析数据供 Vue 使用

封装一个带缓存能力的请求函数

不强改 Axios 全局行为，而是提供一个增强版的 cachedGet() 方法，按需使用。

• 接收 URL、参数、缓存策略（如 staleWhileRevalidate 或 cacheFirst）
• 内部先查本地缓存并返回（Promise.resolve），同时发起网络请求更新缓存
• 适用于详情页、配置类接口——用户看到的是旧数据，后台悄悄刷新，下次访问就是新数据
• 比全局拦截更可控，避免影响登录、提交等强实时性操作

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！