Vite 将空数组注入到 service-worker 中（self.__WB_MANIFEST）

Question

我正在尝试使用 VitePWA 设置预缓存。 Service Worker 注册正常，但 VitePWA 会向文件中注入一个空数组，因此不会缓存任何资产。

我不知道为什么会出现这种情况，并且在 google / github 上找不到任何问题。

我想我配置错误。

这是 vite 配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';
import viteCompression from 'vite-plugin-compression';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  envPrefix: 'REACT_APP_',
  plugins: [
    svgr(),
    react(),
    VitePWA({
      workbox: {
        globPatterns: ['**/*.{js,css,html}'],
      },
      srcDir: 'src',
      filename: 'service-worker.js',
      strategies: 'injectManifest',
      injectRegister: false,
      devOptions: {
        enabled: true,
        type: 'module',
      },
    }),
    viteCompression(),
  ],
});

这是 service-worker 的一部分

import { precacheAndRoute } from 'workbox-precaching';
import { clientsClaim } from 'workbox-core';

self.skipWaiting();
clientsClaim();
precacheAndRoute(self.__WB_MANIFEST); //<-- Will be inlined to []

如何配置VitePWA以包含/public目录中的所有资产？

Answer 1

您找到解决这个问题的方法了吗？我自己也遇到过。

我注意到 Vite PWA 插件在构建时成功注入了 WB_MANIFEST，但在开发服务器中运行时则失败了。当由开发服务器托管时，WB_MANIFEST 将呈现为空数组。

如果您找到解决方案，我们将不胜感激。