vercel部署django中的一些问题

vercel部署django静态资源目录static静态资源加载失败

在部署Django后端时发现在本地部署的后台显示正常而在vercel部署的静态资源都无法显示，导致页面显示错误

在本地开发环境中，Django 开发服务器可能会直接提供 static 文件夹中的静态文件。然而，在 Vercel 或其他生产环境中，静态文件通常不会通过 Django 应用直接提供，而是通过 Vercel 的静态文件服务或 CDN 提供。

所以有可能出现静态资源无法正常加载的情况。

而本地却显示正常

静态文件收集：在部署到 Vercel 之前，你需要运行 collectstatic 命令来收集所有的静态文件到 STATIC_ROOT。Vercel 会从这个目录中提供静态文件。

STATIC_ROOT是settings.py中的设置，所以请修改

# api/settings.py

# 生产环境中指定的目录，用于存放通过 collectstatic 命令收集的所有静态文件
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

然后运行

python manage.py collectstatic

此命令会在你项目下创建 STATIC_ROOT目录。

运行后会收集静态资源至static文件夹下

Vercel 配置： Vercel 需要正确配置以提供静态文件。如果 vercel.json` 配置文件中没有正确设置静态文件的路由，Vercel 可能无法找到这些文件。

在 Vercel 中，vercel.json 配置文件用于定义项目的构建和部署设置，包括如何路由 HTTP 请求。如果你需要对静态文件或者 API 端点等进行特定的路由配置，可以在 vercel.json 中使用 routes 属性。

以下是一些 vercel.json 中路由配置的示例：

基本静态文件路由：
如果你想指定一个静态文件目录，可以创建一个 vercel.json 文件，其中包含一个 routes 数组，用于定义静态文件的路由规则。

{
  "version": 2,
  "builds": {
    "src": "api/wsgi.py",
    "use": "@vercel/python"
  },
  "routes": [
    # 此设置将路由static下所有文件，即可通过链接https://your-django.vercel.app/static/admin/css/base.css直接访问静态文件
    {
      "src": "/static/(.*)",
      "dest": "static/$1"
    },
    {
      "src": "/media/(.*)",
      "dest": "media/$1"
    },
    {
      "src": "/(.*)",
      "dest": "api/wsgi.py"
    }
  ]
}

在这个配置中，/static/ 下的请求被路由到项目中的 static 目录，而 /media/ 下的请求被路由到 media 目录。其余的请求则由 Django 应用处理。

忽略某些文件或目录：
如果你希望 Vercel 在部署时忽略某些文件或目录，可以使用 ignore 属性。

{
  "version": 2,
  "builds": {
    "src": "api/wsgi.py",
    "use": "@vercel/python"
  },
  "routes": [
    // ... 你的路由规则 ...
  ],
  "ignore": [
    ".*\\.txt$",
    "node_modules/.*"
  ]
}

重定向和代理：
你可以使用 headers 属性来进行重定向或设置特定的 HTTP 头。

{
  "version": 2,
  "routes": [
    {
      "src": "/old-path",
      "status": 301,
      "headers": {
        "Location": "https://example.com/new-path"
      }
    },
    {
      "src": "/api/(.*)",
      "dest": "http://your-api-domain.com/$1"
    }
  ]
}

在这个例子中，访问 /old-path 会被重定向到 https://example.com/new-path。而所有匹配 /api/ 的请求会被代理到另一个域名。

环境变量：
你可以在 vercel.json 中使用环境变量，这在需要根据不同的部署环境调整路由时非常有用。

{
  "version": 2,
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "http://${API_DOMAIN}/api/$1"
    }
  ],
  "env": {
    "API_DOMAIN": "your-api-subdomain.vercel.app"
  }
}