React项目中Vite PWA插件开发环境自定义SW路径404问题

问题原因 #

使用injectManifest策略时，开发环境下vite-pwa-plugin默认会从public目录查找Service Worker文件，但你的sw.js放在src目录下，因此触发404错误。

解决方案 #

在devOptions中显式指定swSrc，指向src目录下的Service Worker源文件，修改后的配置如下：

VitePWA({
  srcDir: 'src',
  filename: 'sw.js',
  devOptions: {
    enabled: true,
    swSrc: 'src/sw.js' // 指定开发环境下的Service Worker源文件路径
  },
  strategies: 'injectManifest',
  injectManifest: {
    injectionPoint: undefined
  }
}),

说明 #

• 添加swSrc后，开发环境下插件会正确加载src/sw.js，不再默认去public目录查找
• 生产环境的配置不受影响，依然会按照srcDir和filename的设置编译输出Service Worker

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