部署在Vercel的Django应用CSS无法加载问题求助

1. 静态文件核心配置（settings.py） #

• 强制关闭DEBUG模式：生产环境下DEBUG必须设为False，否则Django会跳过静态文件收集逻辑，直接读取开发目录下的资源，Vercel生产环境不支持这种访问方式。
• 配置正确的静态路径：
  • STATIC_URL必须设为绝对路径'/static/'，不能用相对路径。
  • STATIC_ROOT指定静态文件收集目录，比如STATIC_ROOT = BASE_DIR / 'staticfiles'，Vercel会从这个目录读取静态资源。
  • 确保django.contrib.staticfiles在INSTALLED_APPS列表中，这是Django处理静态文件的核心依赖。
  • 添加Vercel域名到ALLOWED_HOSTS，比如ALLOWED_HOSTS = ['your-vercel-domain.vercel.app', 'localhost']。

修正后的settings.py片段：

DEBUG = False
ALLOWED_HOSTS = ['your-vercel-domain.vercel.app', 'localhost']

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'
# 如果项目根目录有独立static文件夹，需添加到STATICFILES_DIRS
STATICFILES_DIRS = [
    BASE_DIR / 'static',
]

2. URL路由配置（项目根urls.py） #

生产环境必须添加静态文件路由，让Django能正确映射静态资源请求：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你的其他业务路由
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

注意：这条静态路由要放在所有路由的最后，避免和业务路由冲突。

3. Vercel平台配置（vercel.json） #

必须配置Vercel的构建规则与路由映射，确保静态资源被正确识别：

{
  "builds": [
    {
      "src": "your_project_name/wsgi.py",
      "use": "@vercel/python",
      "config": { "maxLambdaSize": "15mb", "runtime": "python3.9" }
    },
    {
      "src": "staticfiles/**/*",
      "use": "@vercel/static"
    }
  ],
  "routes": [
    {
      "src": "/static/(.*)",
      "dest": "/staticfiles/$1"
    },
    {
      "src": "/(.*)",
      "dest": "your_project_name/wsgi.py"
    }
  ]
}

• 替换your_project_name为实际的Django项目名称。
• 在Vercel项目设置中，将Build Command设为：python manage.py collectstatic --noinput（若需数据库迁移可追加&& python manage.py migrate）。

4. 模板静态资源引用规范 #

模板中必须使用Django的静态文件标签加载资源，禁止用相对路径：

{% load static %}
<link rel="stylesheet" href="{% static 'css/your_style.css' %}">

5. 本地预检查 #

部署前先在本地执行python manage.py collectstatic，检查staticfiles目录是否生成并包含所有CSS文件，确认文件路径无错误后再推送代码到Vercel。

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