Express应用部署到Vercel后静态文件无法加载求助

我的Express应用本地运行正常，但部署到Vercel后静态文件（CSS、JS）无法加载。以下是我的代码和配置：

应用代码 #

const exp = require('express')

const app = exp()

app.use(exp.static('public'))

app.get('/', (req, res) => {
    res.send(`<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" href="/coo.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Testing app</title>
    </head>
    <body>
    <h1>testing testing from express</h1>
    <script type="text/javascript" src="/ser.js"></script>
    </body>
    </html>`)
})

let port = process.env.PORT || 2000
app.listen(2000, () => console.log("running on http://localhost:2000"))

module.exports = app;

Vercel配置文件（原错误版本） #

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

问题现象 #

部署构建日志无错误，Vercel能识别到serverless函数和静态文件，但访问应用时静态文件加载失败。本地运行正常，部署后页面仅显示HTML内容，CSS和JS都无法加载。

问题原因及解决步骤 #

你的vercel.json配置存在两个关键问题：

1. 路由优先级错误：当前路由规则/(.*)会匹配所有请求，包括静态文件请求，导致静态文件请求被转发到Express服务，而不是直接由Vercel的静态资源服务处理。
2. outputDirectory配置错误：这个字段用于指定构建产物的输出目录，你的静态文件本身就在public目录，无需设置该字段，反而会导致资源路径混淆。

修改后的正确vercel.json配置 #

{
    "version": 2,
    "builds": [
        {
            "src": "./app.js",
            "use": "@vercel/node"
        },
        {
            "src": "public/**",
            "use": "@vercel/static"
        }
    ],
    "routes": [
        // 优先匹配静态文件请求，直接返回对应资源
        {
            "src": "/(.*\\.(css|js|png|jpg|svg))$",
            "dest": "/public/$1"
        },
        // 剩余请求转发到Express服务处理
        {
            "src": "/(.*)",
            "dest": "app.js"
        }
    ]
}

关键说明 #

• 路由顺序：Vercel按从上到下顺序匹配路由，必须让静态文件规则排在前面，确保静态请求不会被Express服务拦截。
• 静态文件匹配规则：public/**比public/*能更精准匹配public目录下所有文件（包括子目录内的文件）。
• 移除冗余配置：删除outputDirectory字段，该配置仅适用于需要构建产物输出的项目（如React/Vue），你的Express应用不需要此设置。

验证方式 #

修改配置后重新部署Vercel，可直接访问静态文件URL（如https://你的应用域名.vercel.app/coo.css）确认是否能正常返回内容，再检查页面是否加载样式和脚本。

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