Vite pwa 插件无法在 React 应用程序的开发环境中工作

Question

我已经从 webpack 迁移到 vite 并使用vite pwa 插件来注册服务工作者。

我的问题是，当我尝试为 Service Worker 使用自定义路径时，Vite 在生产中可以正常工作，但在开发中会导致 404 错误。

这是我的 VitePwa vite.config.js：

VitePWA({
      srcDir: 'src',
      filename: 'sw.js',
      devOptions: {
        enabled: true,
      },
      strategies: 'injectManifest',
      injectManifest: {
        injectionPoint: undefined
      }
    }),

我已经知道了，在开发环境中，vite pwa插件正在公共目录中寻找sw.js，但我希望它从src获取它

Answer 1

我得到了解决方案：

vitePwaPlugin首先，在配置中将类型设置为模块devOptions：

 devOptions: {
        enabled: true,
        type: 'module',
      },

并将vitePwaPlugin尝试dev-sw.js?dev-sw 以服务人员身份安装文件。

其次，为了处理注册，我使用了 virtual:pwa-register 中的 registerSW

import { registerSW } from 'virtual:pwa-register';

if ('serviceWorker' in navigator) {
  registerSW();
}

请注意，如果您使用的是打字稿，请考虑添加

/// <reference types="vite-plugin-pwa/client" />

到global.d.ts文件（如果没有此文件，可以创建它）