Express.js部署Vercel时出现MIME类型错误的问题求助

看起来你遇到的MIME类型错误，大概率是静态资源（比如你的CSS文件）没有被Vercel正确识别和托管导致的。结合你提供的配置和文件结构，我给你梳理几个关键的排查和修复步骤：

1. 先确认Express应用本身配置了静态资源中间件 #

这是很容易被忽略的基础步骤——你的app.js里有没有告诉Express要托管public目录下的静态资源？如果没加的话，即使Vercel配置对了，Express也不知道去哪里找这些文件。

打开你的app.js，添加这一行代码（放在路由配置之前）：

const express = require('express');
const app = express();

// 托管public目录作为静态资源根目录
app.use(express.static('public'));

// 你的其他路由、模板引擎配置等...

2. 优化vercel.json的配置 #

你当前的配置里，@now/node已经是旧的包名了，现在Vercel推荐用@vercel/node；另外，路由规则的优先级和静态资源的处理逻辑需要调整，避免把静态资源请求也转发给app.js处理。

修改后的vercel.json可以参考下面两种方案：

方案一：明确优先处理public目录的静态资源

{
  "version": 2,
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    // 先匹配public下的所有静态文件，直接返回
    {
      "src": "/public/(.*)",
      "dest": "/public/$1"
    },
    // 剩下的所有请求交给Express处理
    {
      "src": "/(.*)",
      "dest": "app.js"
    }
  ]
}

方案二：让Vercel单独处理静态文件

这种方式更清晰，把静态文件和Express服务分开处理：

{
  "version": 2,
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    },
    {
      "src": "public/**/*",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "app.js"
    }
  ]
}

3. 修正HTML里的资源路径 #

因为你已经通过express.static('public')把public目录设为了静态资源的根路径，所以HTML里的CSS路径应该用：

<link rel="stylesheet" type="text/css" href="/styles/socials.css">

这个路径会直接对应到public/styles/socials.css，和你的文件结构匹配。

4. 最后检查package.json的启动脚本 #

确保你的package.json里有正确的start命令，Vercel会用这个命令启动你的Express服务：

"scripts": {
  "start": "node app.js"
}

做完这些调整后，重新部署到Vercel应该就能解决MIME类型错误了——本质上这个问题是因为静态资源没有被正确识别，导致Vercel返回了错误的文件类型头，浏览器无法解析CSS文件。

备注：内容来源于stack exchange，提问作者Grimm XIII