部署至Vercel后静态文件无法加载的问题求助

1. 修正settings.py中的拼写错误 #

你当前的MEDIA_URLS是拼写错误，正确的配置项是MEDIA_URL，这会直接导致媒体文件路径解析失败：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles_build', 'static')
# 修正拼写错误
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

同时确认BASE_DIR的定义正确（通常默认配置没问题，但如果修改过需要检查）：

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

2. 确保build_files.sh包含静态文件收集命令 #

Vercel构建时需要自动执行collectstatic，你的build_files.sh必须包含以下内容（如果文件不存在就新建）：

#!/bin/bash
python manage.py collectstatic --noinput

这个脚本会在构建阶段把所有静态文件收集到STATIC_ROOT指定的目录中。

3. 调整vercel.json的路由配置 #

当前静态文件路由的dest路径不正确，需要指向staticfiles_build/static目录（也就是STATIC_ROOT的实际位置），同时添加媒体文件的路由规则：

{
    "builds": [
        {
            "src": "social/wsgi.py",
            "use": "@vercel/python",
            "config": { "maxLambdaSize": "15mb", "runtime": "python3.9" }
        },
        {
            "src": "build_files.sh",
            "use": "@vercel/static-build",
            "config": { "distDir": "staticfiles_build" }
        }
    ],
    "routes": [
        // 优先匹配静态文件路由
        {
            "src": "/static/(.*)",
            "dest": "/staticfiles_build/static/$1"
        },
        // 添加媒体文件路由
        {
            "src": "/media/(.*)",
            "dest": "/media/$1"
        },
        // 最后匹配Django WSGI路由
        {
            "src": "/(.*)",
            "dest": "social/wsgi.py"
        }
    ]
}

4. 额外检查项 #

• 确认INSTALLED_APPS中包含django.contrib.staticfiles（默认已包含，若误删需重新添加）
• 重新部署前，本地先执行一次python manage.py collectstatic，确认staticfiles_build/static目录生成了正确的静态文件
• 部署后通过浏览器开发者工具查看静态文件的请求路径，确认返回的是404还是其他错误，进一步排查路径问题

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