Vite插件PWA中解决Service Worker MIME类型错误的实践指南

在使用vite-plugin-pwa构建渐进式Web应用时，开发者可能会遇到Service Worker文件返回错误MIME类型的问题。本文将深入分析该问题的成因，并提供完整的解决方案。

问题现象分析

当项目构建后运行时，控制台会出现警告提示："The script has an unsupported MIME type ('text/html')"。这种情况通常发生在以下场景：

1. 项目使用客户端路由（如React Router或Vue Router）
2. 访问非根路径的页面（如/auth/sign-in）
3. Service Worker文件请求被错误地路由到应用的主HTML文档

根本原因

问题的核心在于Service Worker的注册路径解析错误。默认情况下，插件生成的注册代码会使用相对路径"./sw.js"，这在单页应用的深层路由中会导致：

1. 浏览器尝试从当前路径下加载sw.js（如/auth/sw.js）
2. 服务器返回404响应，但SPA通常会回退到index.html
3. 浏览器接收到HTML内容而非预期的JavaScript，因此报MIME类型不匹配

解决方案

通过配置vite或vite-plugin-pwa的base选项可以完美解决此问题：

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

或者也可以在PWA插件配置中单独指定：

VitePWA({
  base: '/',
  // 其他配置
})

技术原理

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

1. 强制所有资源请求从网站根路径开始解析
2. 确保Service Worker始终从正确的位置(/sw.js)加载
3. 保持Service Worker的作用域(scope)为整个应用
4. 避免因客户端路由导致的路径解析错误

最佳实践建议

1. 对于部署在根域的项目，始终设置base: '/'
2. 对于子路径部署的项目，设置对应的base路径（如'/my-app/'）
3. 在开发和生产环境保持一致的base配置
4. 使用绝对路径而非相对路径引用资源

通过正确配置base选项，开发者可以确保PWA功能在各种路由场景下都能正常工作，避免Service Worker加载失败的问题。