部署至Vercel后CSS与图片无法加载的问题求助

API 探路者

2026-8-8

解决方案

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

当前路由规则会把所有请求都重定向到根路径，导致静态资源请求无法被express.static正确处理。修改配置，让静态资源请求优先匹配并直接返回：

{
    "version": 2,
    "builds": [
        {
            "src": "./index.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        // 优先匹配CSS、图片等静态资源文件
        {
            "src": "/(.*\\.(css|png|jpg|jpeg|gif|svg))$",
            "dest": "/$1"
        },
        // 其余请求导向根路径
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}

2. 验证静态资源路径

确保HTML中引用静态资源时使用绝对路径，避免相对路径在部署后失效：

<!-- 正确写法 -->
<link rel="stylesheet" href="/css/style.css">
<img src="/images/logo.png" alt="Logo">

<!-- 避免使用相对路径 -->
<!-- <link rel="stylesheet" href="css/style.css"> -->

3. 优化静态资源服务（可选）

让Vercel直接托管public目录下的静态资源，无需通过Node服务器转发，提升加载性能：

{
    "version": 2,
    "builds": [
        {
            "src": "./index.js",
            "use": "@vercel/node"
        },
        // 直接托管public目录的静态文件
        {
            "src": "public/**/*",
            "use": "@vercel/static"
        }
    ],
    "routes": [
        {
            "src": "/(.*\\.(css|png|jpg|jpeg|gif|svg))$",
            "dest": "/public/$1"
        },
        {
            "src": "/(.*)",
            "dest": "/"
        }
    ]
}