Vercel部署Django网站后CSS等静态文件无法加载求助

以下是针对Vercel部署Django后CSS等静态文件无法加载的排查和修复步骤：

1. 确认settings.py静态配置正确性 #

确保settings.py中以下配置项正确：

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

# 静态文件基础配置
STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'  # collectstatic的目标目录
STATICFILES_DIRS = [
    BASE_DIR / 'static',  # 你的本地静态文件源目录，比如static/css/...
]

2. 配置Vercel路由规则（关键） #

在项目根目录创建vercel.json，添加静态文件的路由映射，确保Vercel能正确分发静态资源请求：

{
  "builds": [
    {
      "src": "client/wsgi.py",  # 替换为你的WSGI入口文件路径
      "use": "@vercel/python",
      "config": { "runtime": "python3.10" }  # 匹配你的Python版本
    },
    {
      "src": "staticfiles/**",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "dest": "/staticfiles/$1"
    },
    {
      "src": "/(.*)",
      "dest": "client/wsgi.py"
    }
  ]
}

3. 确保collectstatic在构建时自动执行 #

Vercel构建阶段必须运行collectstatic，否则静态文件不会被收集到staticfiles目录：

• 方式一：在项目根目录创建package.json，添加构建脚本：

{
  "scripts": {
    "build": "python manage.py collectstatic --noinput"
  }
}

• 方式二：在Vercel项目后台的「Settings → General → Build & Development Settings」中，将Build Command设置为：

python manage.py collectstatic --noinput

4. 检查模板静态文件引用方式 #

确保HTML模板中正确使用Django静态标签加载资源，禁止硬编码路径：

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'css/your-style.css' %}">

5. 验证本地collectstatic执行结果 #

本地运行以下命令，检查staticfiles目录是否生成了正确的静态文件：

python manage.py collectstatic --noinput

如果本地staticfiles里没有目标CSS文件，说明你的STATICFILES_DIRS配置错误，或者静态文件源目录路径不对。

6. 查看Vercel构建日志排查问题 #

登录Vercel后台，进入对应项目的「Deployments」页面，查看构建日志：

• 确认collectstatic命令是否执行成功
• 检查是否有静态文件收集失败的报错（如权限、路径不存在等）

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