Firebase部署Vite React应用遇MIME类型错误求助

核心原因 #

这类MIME类型错误本质是Firebase Hosting没有正确匹配静态资源路径，导致所有请求都返回了index.html（text/html类型），而非对应的CSS/JS文件。

具体解决方案 #

1. 修正firebase.json配置 #

确保rewrites规则仅在路由不存在时重定向到index.html，避免拦截静态资源请求，同时确认public字段指向Vite构建后的dist目录：

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

注意：部署前必须执行npm run build生成dist目录。

2. 调整Vite配置文件vite.config.ts #

不要用base: "./"，根域名部署直接设为base: '/'，如果是子路径部署（比如your-domain.com/my-app）则设为对应子路径：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/', // 子路径部署示例：'/my-app/'
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  }
})

修改后重新执行npm run build。

3. 清除缓存并重新部署 #

Firebase可能缓存了旧配置，执行以下命令强制刷新：

firebase deploy --only hosting

如果问题依旧，清理本地构建缓存后重新部署：

rm -rf dist node_modules/.vite
npm install
npm run build
firebase deploy

4. 验证静态资源路径 #

直接访问你的CSS/JS文件URL（比如https://你的域名/assets/index-789467f8.css），如果返回的是index.html，说明路径匹配异常：

• 确认dist/assets目录下确实存在对应的CSS/JS文件
• 检查firebase.json中的public路径是否正确指向dist目录

内容的提问来源于stack exchange，提问作者Lady Segura P.