在Vercel部署Django时static/admin/css/base.css文件报404错误

问题描述 #

将Django项目部署到Vercel后，多数功能正常，但管理面板加载时static/admin/css/base.css返回404错误。已确认该文件存在于Vercel静态资源列表中，且可通过目录列表访问，其他静态文件加载正常。

相关配置如下：

vercel.json

{
"version": 2,
"builds": [
    {
        "src": "event_management/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": "/static/$1"
    },
    {
        "src": "/(.*)",
        "dest": "event_management/wsgi.py"
    }
]
}

settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles_build', 'static')

问题原因 #

1. STATIC_URL路径错误：当前STATIC_URL = 'static/'为相对路径，当页面处于/adminpanel/路径下时，浏览器会将静态文件请求解析为/adminpanel/static/admin/css/base.css，而非正确的绝对路径/static/admin/css/base.css，导致404。
2. 未确保collectstatic命令执行：若build_files.sh未正确配置，Django admin的静态文件可能未被收集到指定目录。

修复步骤 #

1. 修正STATIC_URL为绝对路径

修改settings.py中的STATIC_URL，添加前导斜杠：

STATIC_URL = '/static/'

2. 配置build_files.sh执行collectstatic

• 在项目根目录创建或修改build_files.sh，写入以下内容：

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

• 本地执行chmod +x build_files.sh赋予文件可执行权限，然后提交到代码仓库。

3. 验证部署日志

部署完成后，查看Vercel构建日志，确认collectstatic命令无报错，静态文件已成功收集到staticfiles_build/static目录下。

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