Django部署Vercel后静态图片无法显示的解决咨询

1. 修正settings.py静态文件配置 #

确保部署环境下的静态文件参数配置正确：

• 强制设置 DEBUG = False（调试模式下Vercel不会按生产规则处理静态文件）
• 保留 STATIC_URL = '/static/'
• 添加静态文件收集目录配置：STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
• 确认INSTALLED_APPS中包含django.contrib.staticfiles

执行本地静态文件收集命令，生成Vercel需要的静态文件目录：

python manage.py collectstatic

将生成的staticfiles目录加入版本控制，确保Vercel能读取到该目录下的文件。

2. 调整vercel.json路由规则 #

配置静态文件的优先匹配路由，示例配置如下（替换your_project_name为实际项目根目录名）：

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

该配置会让所有/static/开头的请求直接指向staticfiles目录下的对应文件，优先于Django的路由处理。

3. 规范模板中{% static %}标签的使用 #

• 模板开头必须加载static标签：

{% load static %}

• 图片引用路径需对应static目录下的相对路径，例如：

<img src="{% static 'images/banner.png' %}" alt="首页横幅">

collectstatic会自动将static/images/banner.png复制到staticfiles/images/banner.png，Vercel即可正确匹配到文件。

4. 配置Vercel构建命令 #

进入Vercel项目的「Build & Development Settings」，将Build Command设置为：

python manage.py collectstatic --noinput && python manage.py migrate

确保部署时自动执行静态文件收集，避免遗漏静态资源。

5. 检查构建日志与文件权限 #

部署后查看Vercel构建日志，确认collectstatic命令执行成功；同时确保本地static和staticfiles目录权限正常，避免Vercel读取文件时出现权限问题。

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