Vue H5 打包 APK 缓存问题

一、原本 Vue H5 的缓存方式

主要依赖 Web API：

• localStorage：长期存储用户信息、Token 等（关闭页面不丢失）

• Cookie：配合服务端存会话信息（有过期时间）

• Pinia 持久化：基于上述 API 存状态数据

二、打包 APK 后缓存失效的核心原因

APK 本质是用 WebView 加载网页，环境变化导致：

1. Cookie 不稳定：WebView 中 Cookie 易被系统清理、或因 WebView 重启丢失

2. 持久化配置乱：把 isLogin（是否登录）、showLogin（弹窗显示）等临时状态也存了 localStorage，导致重启后状态判断混乱

3. Token 管理不统一：同时用 Cookie 和 localStorage 取 Token，WebView 中两者不同步

4. 状态清除不彻底：退出 / Token 失效时只清了 Token，没清用户、购物车等状态

三、极简解决方案

1. 统一用 localStorage，放弃 Cookie 做主存储

javascript

运行

// 只认 localStorage 存 Token
const token = localStorage.getItem('token') 
// 若 Cookie 有 Token，同步到 localStorage
if (!token && Cookies.get('token')) {
  localStorage.setItem('token', Cookies.get('token'))
}

2. 修复 Pinia 持久化：只存必要数据

javascript

运行

// user.js 示例
persist: {
  enabled: true,
  strategies: [{
    storage: localStorage,
    paths: ['userInfo', 'headImage'] // 只持久化用户信息，不存 isLogin、showLogin
  }]
}

// 购物车等临时数据直接禁用持久化
persist: { enabled: false }

3. 写个统一的「重置状态」方法

javascript

运行

// 退出/Token 失效时调用
function resetAllState() {
  localStorage.removeItem('token')
  userStore.resetUser() // 重置用户状态（isLogin=false、userInfo={}...）
  cartStore.resetCart() // 重置购物车
}

4. 响应拦截器统一处理 Token 失效

javascript

运行

// 接口返回 20005/20004（Token 失效）时
if (response.data.code === '20005') {
  resetAllState() // 清所有状态
  userStore.showLogin = true // 弹登录框
}