Vite PWA Service Worker忽略指定路径

版本

 "vite": "^4.4.5"

 "vite-plugin-pwa": "^0.16.6"

代码

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

export default defineConfig(configEnv => {


  return {
    plugins: [
      react(),
      VitePWA({
        injectRegister: 'script',
        registerType: 'prompt',
        devOptions: {
          enabled: true, // 开启本地调试
        },
        manifest: {
          name: '应用名字',
          short_name: '应用名字',          description: '应用描述',          icons: [
            {
              src: '/icon-512x512.png',
              sizes: '512x512',
              type: 'image/png',
              purpose: 'any',
            },
            {
              src: '/icon-192x192.png',
              sizes: '192x192',
              type: 'image/png',
              purpose: 'maskable',
            },
            {
              src: '/icon-128x128.png',
              sizes: '128x128',
              type: 'image/png',
            },
          ],
          display: 'standalone',
          scope: '/',
          start_url: '/',
          orientation: 'portrait',
        },
        workbox: {
          skipWaiting: true,
          globPatterns: ['game1/'], // 排除 game1 目录
        },
      }),
    ],
    resolve: {
    },
    server: {
      host: '0.0.0.0',
      port: 7777,
    },
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
        },
      },
      rollupOptions: {
        output: {
          chunkFileNames: 'js/[name]-[hash].js',
          entryFileNames: 'js/[name]-[hash].js',
          assetFileNames: '[ext]/[name]-[hash].[ext]',
        },
      },
    },
  }
})

主要是

 workbox: {
          skipWaiting: true,
          globPatterns: ['game1/'], // 排除 game1 目录
        }

这样访问部署环境根目录下的 game1 就可以不走 serviceWorker缓存了, 也就不会产生 404 这种情况了

例如一个域名: xxxx.com

他的跟目录里手动添加了一个文件game1/index.html

如果不忽略 worker, 直接访问它的资源xxxx.com/game1, 会 404

添加之后, 访问xxxx.com/game1, 就可以访问到 xxxx.com/game1/index… 了