开发模式下使用vite pwa插件加载资源失败

Question

我有一个非常简单的 vite 应用程序，我尝试使用 vite-pwa 插件以便离线使用它。它在构建应用程序时运行良好（

npm run build

，然后是

npm run preview

），但在开发模式下则不然。运行

npm run dev

时，没有正确加载资源：

我的 vite.config.ts 看起来像这样：

...
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [vue(), VitePWA({
    registerType: 'autoUpdate',
    devOptions: {
      enabled: true,
    },
    manifest: {
      name: 'Your App Name',
      start_url: '.',
      display: 'standalone',
      icons: [
        {
          src: 'icon.svg',
          sizes: '192x192',
          type: 'image/svg+xml',
        }
      ],
    },
  })],
})

我尝试使用 vite.config.ts 中的 workbox 选项添加自定义缓存，但没有成功。

workbox: {
  {
    urlPattern: ({ url }) => {
      let suffixArray = [".ts", ".vue", ".svg", ".css", ".webmanifest", ".js"];
      return suffixArray.some(suffix => url.pathname.endsWith(suffix));
    },
    handler: 'CacheFirst',
    options: {
      cacheName: 'static-cache',
      expiration: {
        maxEntries: 10,
        maxAgeSeconds: 60 * 60 * 24 * 365
      },
      cacheableResponse: {
        statuses: [0, 200]
      },
    }
  }

这个

static-cache

似乎缓存了一些文件，但不是全部，例如main.ts文件。当我切换到离线模式时，不会加载任何资源。

所以基本上，我不明白为什么离线模式在应用程序构建时运行良好，但在开发模式下运行不佳？我已经阅读了很多关于这个主题的文章，但我仍然不清楚根本问题是什么。任何帮助将非常感激！

Answer 1

在您的 VitePWA({}) 中，添加以下行来缓存所有所需的数据：

  workbox: {
    globPatterns: ["**/*"],
  },
  includeAssets: ["**/*"],