Vue 3项目配置离线缓存与PWA支持的核心是引入Service Worker并配合适当缓存策略，借助vite-plugin-pwa或@vue/cli-plugin-pwa等插件自动生成service-worker.js和manifest.json，按资源类型分别采用CacheFirst（静态资源）、StaleWhileRevalidate（API）和navigateFallback（SPA路由）策略，最后通过DevTools验证注册、清单及离线行为。

Vue 3 项目配置离线缓存与 PWA 支持，核心是引入 Service Worker 并配合适当的缓存策略，同时提供 manifest 描述文件。不需要手写底层逻辑，主流构建工具（Vite 或 Vue CLI）都有成熟插件支持，关键在选对插件、填对配置、验对行为。

用 vite-plugin-pwa 快速启用（推荐 Vite 项目）

Vite 生态中，vite-plugin-pwa 是最主流、维护活跃的选择。它自动生成 service-worker.js 和 manifest.json，并默认集成 Workbox 运行时缓存能力。

• 安装插件：npm install vite-plugin-pwa -D
• 在 vite.config.ts/js 中添加配置，例如：

  import { VitePWA } from 'vite-plugin-pwa'
  export default defineConfig({
    plugins: [
      vue(),
      VitePWA({
        registerType: 'autoUpdate',
        devOptions: { enabled: true },
        manifest: {
          name: '我的应用',
          short_name: 'App',
          icons: [
            { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
            { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' }
          ]
        },
        workbox: {
          globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
          navigateFallback: '/index.html',
          runtimeCaching: [
            {
              urlPattern: /^https?:\/\/.*\/api\//,
              handler: 'StaleWhileRevalidate',
              options: { cacheName: 'api-cache' }
            }
          ]
        }
      })
    ]
  })

• 确保 public/ 下有对应尺寸的图标文件（如 pwa-192x192.png），否则 manifest 会失效

用 @vue/cli-plugin-pwa（适用于 Vue CLI 项目）

如果你用的是 Vue CLI 创建的项目（非 Vite），则使用官方插件更稳妥。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 安装插件：vue add pwa（自动完成配置和文件生成）
• 修改 vue.config.js 中的 pwa.workboxOptions，重点设好：
  • navigateFallback: '/index.html' —— SPA 路由离线兜底必需
  • runtimeCaching 数组定义 API 和静态资源策略
  • skipWaiting: true 和 clientsClaim: true —— 让新 SW 立即激活
• 构建后检查 dist/ 目录是否生成了 service-worker.js 和 manifest.json

验证是否生效：三步必查

配置完不能只看打包成功，要实测行为是否符合预期。

立即学习“前端免费学习笔记（深入）”；

• Application → Service Workers（Chrome DevTools）：确认状态为 “Activated and is running”，没有红色报错；点击 “Update on reload” 可强制刷新 SW
• Application → Manifest：查看图标、名称、start_url 是否正确加载；右上角应出现“安装”按钮（桌面 Chrome 或安卓 Chrome）
• 离线测试：打开应用 → 切到 Application → Service Workers → 勾选 “Offline” → 刷新页面，首页和已访问过的路由应正常显示；API 请求若命中缓存也应返回旧数据（StaleWhileRevalidate 行为）

缓存策略怎么选？按资源类型区分

不是所有请求都该一样缓存。Workbox 提供多种 Handler，合理搭配才能兼顾速度与一致性：

• 静态资源（JS/CSS/HTML/图片/字体）：Webpack/Vite 构建后带哈希，用 CacheFirst —— 永远读缓存，仅构建更新时换新
• API 接口（如 /api/user）：内容常变，用 StaleWhileRevalidate —— 先返回缓存，后台拉新数据并更新缓存
• 导航请求（/about、/order/123）：必须配 navigateFallback，让未缓存路径 fallback 到 index.html，交由 Vue Router 处理