在Vercel部署Django项目（搭配Whitenoise）时静态文件无法加载

1. 修改 settings.py 配置 #

• 调整中间件顺序，将Whitenoise放在指定位置（这是静态文件生效的核心前提）：

  MIDDLEWARE = [
      'django.middleware.security.SecurityMiddleware',
      'whitenoise.middleware.WhiteNoiseMiddleware',  # 必须位于SecurityMiddleware之后、CommonMiddleware之前
      'django.contrib.sessions.middleware.SessionMiddleware',
      'django.middleware.common.CommonMiddleware',
      # 其余中间件保持原有顺序
  ]
  

• 完善静态文件与生产环境配置：

  DEBUG = False  # 生产环境强制关闭DEBUG模式
  ALLOWED_HOSTS = ['*']  # 测试阶段可临时用通配符，正式部署建议指定Vercel域名（如xxx.vercel.app）
  
  STATIC_URL = '/static/'
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')  # 静态文件收集后的存放目录
  STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]  # 项目中手动存放静态文件的目录
  STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
  
  # 可选：若出现静态文件哈希匹配失败的报错，添加此行关闭严格校验
  WHITENOISE_MANIFEST_STRICT = False
  

2. 修改 vercel.json 路由配置 #

确保静态文件请求优先被处理，其余请求转发给Django的WSGI服务：

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

3. 修改 build.sh 脚本 #

确保部署时自动收集静态文件，且无交互执行：

#!/bin/bash
pip install -r requirements.txt
python manage.py collectstatic --noinput

4. 修改 wsgi.py 文件 #

用Whitenoise包装Django应用，确保静态文件被正确托管：

import os
from django.core.wsgi import get_wsgi_application
from whitenoise import WhiteNoise

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'me.settings')

application = get_wsgi_application()
# 指定静态文件根目录并添加额外静态文件目录
application = WhiteNoise(application, root=os.path.join(os.path.dirname(os.path.dirname(__file__)), 'staticfiles'))
application.add_files(os.path.join(os.path.dirname(os.path.dirname(__file__)), 'static'), prefix='static/')

验证步骤 #

1. 将所有修改提交到GitHub仓库的teste分支
2. 触发Vercel重新部署
3. 访问项目页面，检查静态文件是否正常加载

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