Firebase Hosting部署Vue3+Vite应用刷新报错：不允许的MIME类型(text/html)

1. 配置Firebase Hosting重写规则 #

Firebase Hosting默认仅处理根路径的index.html，刷新带路由参数（如/detail/:docId）的页面时，服务器会尝试查找对应物理文件，找不到则返回404，导致应用无法加载。需在firebase.json中添加重写规则，让所有路由请求指向index.html：

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

该规则会将所有请求转发到index.html，交由Vue前端路由接管处理，避免刷新时出现404。

2. 确认Vue Router的history模式配置 #

Vue Router使用history模式时，必须依赖服务器端重写支持（本地开发时Vite的devServer已默认处理）。检查路由配置确保使用createWebHistory：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/detail/:docId',
      name: 'Detail',
      component: () => import('../views/DetailView.vue'),
      props: true
    }
    // 其他路由配置
  ]
})

若之前使用hash模式虽无刷新问题，但URL会带#，如需保留history模式，必须配合上述Firebase重写规则。

3. 优化docId参数获取逻辑 #

刷新后接口未调用，大概率是docId参数获取时机或方式存在问题。避免仅依赖props传递，直接从路由参数中获取更可靠：

<script setup>
import { useRoute, onMounted } from 'vue'
import { fetchDetail } from '@/api'

const route = useRoute()
const docId = route.params.docId

onMounted(async () => {
  if (docId) {
    const data = await fetchDetail(docId)
    // 数据处理逻辑
  }
})
</script>

刷新页面时，props传递可能依赖路由初始化时机，直接读取路由参数能确保组件挂载时及时获取参数并触发接口调用。

4. 检查Vite打包与部署路径配置 #

确保vite.config.js中的base路径与Firebase Hosting部署路径一致，避免静态资源加载失败：

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

export default defineConfig({
  plugins: [vue()],
  base: '/' // 部署在根路径时保持默认；子路径需对应设置
})

同时确认dist目录下所有文件已完整部署到Firebase Hosting，可通过Firebase控制台的Hosting文件列表验证。

5. 验证接口调用时机 #

确认接口调用逻辑写在onMounted等组件生命周期钩子中，而非仅在路由跳转的回调里。刷新页面时，组件重新挂载，需保证此时能触发接口调用逻辑，而非依赖之前的路由跳转事件。

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