部署React/Vite应用到Vercel后页面空白，报MIME类型错误

核心问题分析 #

控制台报错Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html"，原因是vercel.json的路由规则把所有请求（包括静态资源）都重定向到了index.html，导致浏览器请求assets/xxx.js时收到的是HTML文件，而非JS模块。

解决方案 #

1. 修正vercel.json路由配置 #

调整路由规则，优先匹配静态资源，再处理SPA的 fallback 路由：

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "build"
      }
    }
  ],
  "routes": [
    // 先匹配所有静态资源，直接返回对应文件
    {
      "src": "/assets/(.*)",
      "dest": "/assets/$1"
    },
    // 其他请求（SPA路由）才重定向到index.html
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

2. 调整vite.config.js的base配置 #

如果部署在Vercel的根域名（非子路径），将base设为'/'（默认值，也可省略）：

export default defineConfig({
  base: '/',
  build: {
    outDir: 'build',
  },
  plugins: [react()],
});

3. 验证构建后的文件 #

执行npm run build后，确认build/index.html中的<script>标签src已被Vite自动替换为assets/xxx.js（带哈希的正确路径），无需手动修改原始的./src/index.jsx路径。

4. Vercel项目设置调整 #

在Vercel项目的Build & Development Settings中：

• 框架预设选择Vite
• 构建命令保持npm run build
• 输出目录设为build

完成以上步骤后重新部署，页面即可正常加载。

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