Vue 3 项目怎么配置离线缓存与 PWA 支持-Vue.js-PHP中文网

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 支持

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 处理

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