Vite+React应用刷新嵌套路由组件触发MIME类型错误求助

问题根源 #

这是单页应用（SPA）部署的典型问题：刷新/dashboard/records这类嵌套路由时，服务器会尝试寻找对应路径的物理文件，但这些路由是前端路由，不存在实际文件，服务器返回了index.html，而浏览器期望加载JS模块，因此触发MIME类型不匹配错误。create-react-app默认处理了相关配置，所以你朋友没遇到问题，但Vite需要手动调整。

解决方案 #

无需重写代码，按以下步骤操作即可：

1. 修正Vite的base路径配置
   在项目根目录的vite.config.js中，将base设置为绝对根路径：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     base: '/', // 关键：设置为绝对根路径，确保资源引用不迷路
     plugins: [react()],
     // 其他原有配置...
   })
   

   这个配置会让Vite生成的所有资源引用都以根路径开头，避免嵌套路由下相对路径找错资源位置。

2. 配置部署平台的SPA fallback规则
   不管用Netlify还是Cloudflare Pages，都需要让服务器把所有路由请求转发到index.html，由React Router处理前端路由：

   • Netlify：在项目根目录创建_redirects文件，写入以下内容后提交到仓库：

     /* /index.html 200
     

   • Cloudflare Pages：进入部署项目的「设置」→「路由」，添加一条重写规则：
     • 源路径：/*
     • 目标路径：/index.html
     • 状态码：200

3. 检查资源引用方式
   确保项目中所有静态资源（图片、字体等）使用绝对路径引用，比如：

   // 正确写法：绝对路径
   <img src="/assets/logo.png" alt="logo" />
   // 或者用Vite环境变量动态拼接，适配不同部署路径
   <img src={`${import.meta.env.BASE_URL}assets/logo.png`} alt="logo" />
   

   避免使用../assets/logo.png这类相对路径，嵌套路由下相对路径会指向错误的层级。

验证 #

完成以上配置后，重新构建项目并部署，刷新嵌套路由页面就不会再出现MIME类型错误了。你的路由代码本身没有问题，问题出在静态资源路径配置和服务器路由转发规则上。

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