解决vite-plugin-pwa中Service Worker的MIME类型错误问题

在使用vite-plugin-pwa插件为Vite项目添加PWA支持时，开发者可能会遇到一个常见问题：浏览器控制台报告"sw.js"文件具有不受支持的MIME类型('text/html')。这个问题通常表现为服务工作者(Service Worker)无法正确注册，导致PWA功能失效。

问题现象

当项目构建为生产环境并在本地测试时，控制台会显示以下警告信息：

The script has an unsupported MIME type ('text/html')

特别是在单页应用(SPA)中，当访问类似"/auth/sign-in"这样的路由时，问题会更加明显。此时浏览器会尝试从"/auth/sw.js"路径加载服务工作者文件，而不是从正确的根路径"/sw.js"加载。

问题根源

这个问题的根本原因在于服务工作者文件的路径解析不正确。Vite项目默认可能没有正确配置基础路径(base)，导致：

1. 服务工作者注册时使用了相对路径"./sw.js"
2. 在SPA的不同路由下，相对路径会被解析为相对于当前路由的路径
3. 服务器对于不存在的路径返回了HTML内容(通常是index.html)，而不是预期的JavaScript文件

解决方案

要解决这个问题，需要在Vite配置中明确设置基础路径。有两种方式可以实现：

1. 在Vite全局配置中设置base：

// vite.config.js
export default defineConfig({
  base: '/',
  // 其他配置...
})

2. 在vite-plugin-pwa插件配置中设置base：

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    VitePWA({
      base: '/',
      // 其他PWA配置...
    })
  ]
})

原理分析

设置base: '/'的作用是：

1. 确保所有资源路径都从网站根目录开始解析
2. 使服务工作者注册时使用绝对路径"/sw.js"而不是相对路径"./sw.js"
3. 保持服务工作者作用域(scope)始终在网站根目录下
4. 避免在不同路由下路径解析错误的问题

最佳实践

除了设置基础路径外，还建议：

1. 明确指定服务工作者的作用域和作用域策略
2. 在生产环境中测试PWA功能时，使用真实的Web服务器而不是简单的文件服务
3. 确保服务器正确配置了.js文件的MIME类型
4. 使用Chrome DevTools的Application面板验证服务工作者是否正确注册

通过正确配置基础路径，可以确保vite-plugin-pwa生成的服务工作者在各种路由情况下都能正确加载和注册，为应用提供完整的PWA功能支持。