Django admin后台的静态文件css文件无法加载，及搞懂Django静态文件配置 +

本文链接：https://blog.youkuaiyun.com/bigcarp/article/details/143055797

解决办法是：

IIS：

方案一：

1、创建虚拟目录/static/，

2、把 venv\Lib\site-packages\django\contrib\admin\static\admin 目录复制到 static\admin

方案二：

1、在settings.py中设置好STATIC_ROOT ，创建对应的文件夹。

2、执行python manage.py collectstatic 完成静态文件收集

3、在静态文件根目录下创建web.config,说明本路面可以访问

4、在iis站点管理中创建一个STATIC_URL的访问路径为的虚拟目录指向STATIC_ROOT

============

在大多数现代 Web 开发框架和语言中，静态文件的 URL和本地硬盘上的绝对路径DIR通常都会通过变量或配置文件来管理。这样做的目的是为了更灵活地处理静态文件在开发环境、测试环境、生产环境中的差异，并且让代码更易于维护和部署。

简单的例子如：一个第三方库使用的静态文件，其存储路径和访问路径都有必要通过变量或配置文件来管理，否则集成起来很麻烦。python manage.py collectstatic 就是用来解决这个问题的。

django settings.py中

STATIC_ROOT 是静态文件的最终目的地。
STATICFILES_DIRS 是静态文件的源目录。
collectstatic 命令会将 STATICFILES_DIRS 中的所有静态文件收集到 STATIC_ROOT 中。

-----------------------

搞懂Django静态文件配置：

Django项目中，提供静态文件服务的模块有多个，但他们的使用场景主要在开发环境。

在生产环境中需要用到的只有一个，就是python manage.py collectstatic。而这个 python manage.py collectstatic 在开发环境中一般是不用的。

django.contrib.staticfiles：

1、当DEBUG=False 时 django.contrib.staticfiles 就不再处理静态文件了（举例：开发环境中，若DEBUG=False，那么admin的css和js都读取不到）。

2、当DEBUG=True时，它能自动处理这些静态文件请求：

（1）STATICFILES_DIRS：放在 STATICFILES_DIRS 的静态文件

（2）INSTALLED_APPS中的应用：每个应用根目录下的 /static/ 中的静态文件。

（3）第三方库：第三方库安装目录下的 /static/ 中的静态文件。

举例1：

STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'my_css',
    BASE_DIR / 'my_static_file',
    ]

# 能通过 http://127.0.0.1:8000/static/abc.css
# 和  http://127.0.0.1:8000/static/abc.html  访问到对应的静态文件

举例2：django admin 的css和js

通过 http://127.0.0.1:8000/static/admin/css/base.css 可以访问

举例3：第三方库 --->参考举例2

实际上， python manage.py collectstatic 收集的也就是以上三类文件夹中的静态文件，然后复制到 STATIC_ROOT 中。

STATIC_ROOT 仅在执行 python manage.py collectstatic 命令时被使用，其他时候不会用到。

另，如果你从 INSTALLED_APPS 中删除一个应用程序，最好使用 collectstatic --clear 选项来删除过时的静态文件。

django.conf.urls.static 和 django.views.static.serve

对于临时的，或者不打算放在 STATICFILES_DIRS 的，又或者要求url不以 STATIC_URL 定义的前缀开头的，可以使用django.conf.urls.static 或 django.views.static.serve，直接在urls.py中定义url规则。

举例：settings.py中设置了 STATIC_URL = 'static/' ，但某个模块的某个图片读取路径写死了/images/xxxx.jpg，就可以用。注意：django.conf.urls.static仅在 DEBUG=True 有效

# urls.py
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 其他路由
] + static('/images/', document_root='/path/to/your/images')

或 django.views.static.serve 不依赖 DEBUG，在开发和生产环境都能使用。

# urls.py
from django.urls import re_path
from django.views.static import serve

urlpatterns = [
    re_path(r'^images/(?P<path>.*)$', serve, {'document_root': '/path/to/your/images'}),
]

特性/用途	django.conf.urls.static	django.views.static.serve
主要用途	简化开发环境中的静态文件服务配置	手动为任意目录或静态资源自定义访问路径。
使用前提	仅在 `DEBUG=True` 下有效	不依赖 `DEBUG`，在开发和生产环境都能使用。建议配合if settings.DEBUG 使用
配置复杂度	简单	需要手动定义 URL 规则
生产环境适用性	❌绝对不适用于生产环境	❌绝对不应该用于生产环境

MEDIA_ROOT 和 MEDIA_URL

注意：django.contrib.staticfiles 不处理 MEDIA_URL 和 MEDIA_ROOT ，如果要在浏览器中访问上传的媒体文件（如用户头像、附件），开发环境中应该在 urls.py 中使用 django.conf.urls.static()进行配置。生产环境中应该用web服务器配置。

from django.conf import settings
from django.conf.urls.static import static
from django.urls import re_path

urlpatterns = [
    # ... 你的其他 URL 模式 ...
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    #或者
    #urlpatterns += [re_path(r'^%s(?P<path>.*)$' % settings.MEDIA_URL.lstrip('/'), serve, {'document_root': settings.MEDIA_ROOT}),]

========

早期，这种复杂的静态文件管理方式并不常见。那时候的网站通常是“页面驱动”的，静态文件简单地组织在特定的目录下，然后直接在 HTML 模板中引用它们即可。在不涉及复杂前端逻辑的情况下，这种方式是适合的。

但是随着 Web 开发的复杂度和规模不断增加，尤其是在前后端分离、单页应用（SPA）等现代开发范式的普及之后，静态资源管理的问题变得越来越显著：

1、前端资源的增多、存储位置分布散乱。

2、集中存放集中管理，才能便于文件压缩（例如 Gzip 压缩）、缓存控制、及CDN分发。

3、Webpack等构建工具，使静态文件的收集和处理成为了现代项目构建过程中的标准步骤。

2010年代中期开始，特别是在单页应用（SPA）流行之后，前后端分离的开发模式让静态文件的优化成为重点，构建工具（如 Webpack）开始广泛使用，使得静态文件的打包、优化成为常态。各种语言的框架（Django、Laravel、Spring 等）也逐渐引入了类似 collectstatic 的静态文件管理和优化机制。

随着web项目复杂程度提高，一个项目有很多模块、子模块，若按旧模式管理静态资源，文件存放的目录层次可能很深，静态资源分布散乱。

早期，Web 前端开发一般不需要部署一个web server作为开发环境，做出来的页面通过浏览器直接访问本地文件（file://dir/filename）即可正常渲染，查看页面效果。然而，随着 Web 技术的发展和复杂度的增加，现代前端开发几乎都需要运行一个本地 Web 服务器，通常访问路径为 http://127.0.0.1:端口（或 localhost:端口）

现代 Web 开发已经不再是简单的静态页面，而是复杂的单页应用（SPA）或多页动态 Web 应用。例如使用框架如 React、Vue、Angular，这些框架通常需要通过 Web 服务器来处理页面路由、API 请求等功能。
页面通常由构建工具（如 Webpack、Vite）打包和编译，这些工具需要通过 Web 服务器来实时监视和更新开发中的文件。
动态资源的加载、API 请求、跨域问题等现代需求，都依赖于 HTTP 协议，在 file:// 协议下无法正常工作。

动态路由与浏览器历史模式

单页应用（SPA）和其他复杂的前端框架（例如 React Router）常常依赖于 HTML5 History API 来处理页面路由。这意味着你可以通过修改 URL 来实现页面的无刷新跳转，但这在 file:// 协议下是不可能实现的。只有在通过 Web 服务器提供文件时，路由功能才能正常工作。