Vite PWA插件开发模式下资源加载失败问题求助

1. Workbox配置语法错误 #

你的自定义缓存规则写法存在语法问题：workbox配置项中，自定义缓存策略必须放在runtimeCaching数组内，而非直接嵌套对象。错误的写法会导致规则完全不生效，这也是static-cache仅缓存部分文件的核心原因。

2. 开发模式资源匹配与策略适配 #

开发模式下，Vite会为资源添加查询参数（如?import），且资源路径结构和生产环境存在差异。另外，默认的CacheFirst策略在开发场景下并不适用——它会缓存旧代码，导致你修改后的代码无法及时生效，同时可能漏掉入口HTML文件的缓存，直接导致离线时无法加载资源。

修正后的完整配置 #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true,
        type: 'module' // 开启开发模式下的Service Worker日志，方便调试
      },
      manifest: {
        name: 'Your App Name',
        start_url: '.',
        display: 'standalone',
        icons: [
          {
            src: 'icon.svg',
            sizes: '192x192',
            type: 'image/svg+xml',
          }
        ],
      },
      workbox: {
        runtimeCaching: [
          {
            urlPattern: ({ url }) => {
              const pathname = url.pathname;
              // 添加.html后缀，确保入口文件被缓存
              const suffixArray = [".ts", ".vue", ".svg", ".css", ".webmanifest", ".js", ".html"];
              return suffixArray.some(suffix => pathname.endsWith(suffix));
            },
            // 开发模式推荐用StaleWhileRevalidate：优先用缓存，同时后台更新缓存
            handler: 'StaleWhileRevalidate',
            options: {
              cacheName: 'static-cache-dev',
              expiration: {
                maxEntries: 50,
                maxAgeSeconds: 60 * 60 * 24 // 开发缓存1天足够
              },
              cacheableResponse: {
                statuses: [0, 200]
              },
            }
          }
        ]
      }
    })
  ],
})

调试步骤 #

• 打开浏览器DevTools的Application面板，查看Service Workers确认已激活，再检查Cache Storage中的static-cache-dev是否包含所有必要资源。
• 修改代码后，可在DevTools中点击Service Worker的Update按钮，强制刷新缓存。
• 若仍有资源未被缓存，可在urlPattern逻辑中加入console.log(url)，打印请求URL排查匹配问题。

内容的提问来源于stack exchange，提问作者JulienRobitaille