Django 4 静态资源与媒体文件配置实践
在 Django 4 项目中，静态资源（CSS、JavaScript、图片等）和用户上传的媒体文件需要分别配置独立的管理策略。以下从配置项设置、开发环境调试到生产环境部署进行完整说明。
静态文件配置
编辑 settings.py 文件，添加以下配置：
import os
from pathlib import Path
# 项目根目录
PROJECT_ROOT = Path(__file__).resolve().parent.parent
# 静态文件 URL 前缀
STATIC_URL = '/assets/'
# 开发阶段：Django 查找静态文件的额外目录
STATICFILES_DIRS = [
os.path.join(PROJECT_ROOT, 'assets'),
]
# 生产阶段：collectstatic 命令收集目标目录
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'collected_static')
关键区别说明：
STATICFILES_DIRS：开发时使用的源文件目录列表，支持多个路径STATIC_ROOT：部署前执行收集命令的统一输出目录
生产环境收集命令：
python manage.py collectstatic --noinput
媒体文件配置
用户上传的内容（头像、附件等）需单独配置：
# 媒体文件访问 URL
MEDIA_URL = '/uploads/'
# 媒体文件本地存储绝对路径
MEDIA_ROOT = os.path.join(PROJECT_ROOT, 'upload_storage')
路由配置（仅开发环境）
修改主路由文件 urls.py，添加调试模式下的文件服务：
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path
urlpatterns = [
# 业务路由...
]
# 开发环境：由 Django 直接托管静态与媒体文件
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
生产环境务必关闭此配置，改用 Nginx 等反向代理直接处理静态请求。
模板中引用静态文件
确保模板继承结构中使用正确的加载标签：
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'styles/main.css' %}">
</head>
<body>
<img src="{% static 'images/logo.png' %}" alt="Logo">
<script src="{% static 'scripts/app.js' %}"></script>
</body>
</html>
集成 Bootstrap 4.6 示例
以前端框架集成为例，演示完整静态资源管理流程：
目录结构准备：
assets/
├── css/
│ └── bootstrap.min.css
├── js/
│ ├── jquery-3.6.0.min.js
│ └── bootstrap.bundle.min.js
└── fonts/
└── (字体文件)
Bootstrap 4.6 依赖 jQuery 3.x，加载顺序至关重要。基础模板 base.html：
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Site{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
{% block extra_css %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="/">项目首页</a>
</div>
</nav>
<main class="container mt-4">
{% block content %}{% endblock %}
</main>
<!-- 脚本加载顺序：jQuery 必须在 Bootstrap 之前 -->
<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>
注意使用 bootstrap.bundle.min.js 已内置 Popper.js，无需单独引入。
生产环境部署要点
Nginx 配置示例片段：
location /assets/ {
alias /var/www/myproject/collected_static/;
expires 30d;
add_header Cache-Control "public, immutable";
}
location /uploads/ {
alias /var/www/myproject/upload_storage/;
client_max_body_size 20M;
}
location / {
proxy_pass http://127.0.0.1:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
关键安全提示：生产环境禁止将 STATIC_ROOT 或 MEDIA_ROOT 设置为项目代码目录的子目录，防止目录遍历攻击。
