Vite + React项目部署Firebase时出现MIME类型错误求助

问题根源 #

你遇到的报错核心原因有两个：

1. Firebase托管目录配置错误：你的firebase.json里指定的public目录是build，但Vite默认将生产构建产物输出到dist目录，导致部署的不是正确的编译后文件。
2. 构建产物引用路径错误：你提供的“构建后的index.html”里依然引用../src/main.jsx，这说明这个文件根本不是Vite编译生成的（正常构建后应该引用dist/assets下的打包JS文件），大概率是项目根目录的原始index.html被误放到了build目录中。

修复步骤 #

1. 修正Firebase托管配置 #

打开firebase.json，将hosting.public的值从"build"改为"dist"：

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

2. 清理并重新构建项目 #

• 删除项目根目录下的build目录（避免后续混淆）
• 重新执行构建命令：

npm run build

此时检查dist/index.html，里面的script标签应该类似这样（路径指向assets下的打包文件）：

<script type="module" src="/assets/main-[hash].js"></script>

3. 重新部署到Firebase #

执行部署命令：

firebase deploy

额外优化建议 #

• 删除项目根目录下的index.html，Vite默认使用public/index.html作为模板，根目录的这个文件会造成混淆。
• 修正public目录里favicon的引用路径：当前<link rel="shortcut icon" type="./images/png" href="/logo.png"/>存在错误，type应该是image/png，如果logo放在public/images下，href应该改为/images/logo.png。

内容的提问来源于stack exchange，提问作者heshan navindu