为什么浏览器不加载静态文件？答案

【问题标题】：Why brower is not loading static files?为什么浏览器不加载静态文件？
【发布时间】：2020-04-13 23:49:50
【问题描述】：

settings.py

STATIC_URL = '/static/'
STATICFILES_DIR = [
os.path.join(BASE_DIR, 'static_in_env')
]

STATIC_ROOT = os.path.join(BASE_DIR, 'static_root')
MEDIA_ROOT = os.path.join(BASE_DIR, 'media_root')
MEDIA_URL = '/media/'

django.contrib.staticfiles' 包含在 installed_apps 中。 {% load static from staticfiles %} 在 base.html 中使用。仍然出现这些错误：

[22/Dec/2019 13:45:31] "GET / HTTP/1.1" 200 10735
[22/Dec/2019 13:45:32] "GET /static/js/jquery-3.4.1.min.js HTTP/1.1" 404 
1791
[22/Dec/2019 13:45:43] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 
1788
[22/Dec/2019 13:45:43] "GET /static/css/mdb.min.css HTTP/1.1" 404 1770
......

script.html

{% load static from staticfiles %}

<script type="text/javascript" src="{% static 'js/jquery-3.4.1.min.js' 
%}"> 
</script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="{% static 'js/popper.min.js' %}"> 
</script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"> 
</script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="{% static 'js/mdb.min.js' %}"> 
</script>
<!-- Initializations -->
<script type="text/javascript">
// Animations initialization
new WOW().init();

</script>

staticfiles 目录包括以下文件和文件夹

static_in_env

 - css
   -bootstrap.css
   -bootstrap.min.css
   -mdb.css
   -mdb.min.css
   -mdb.lite.css
   -mdb.lite.min.css
   -style.css
   -style.min.css
 - font
 - img
 - js
    -bootstrap.js
    -bootstrap.min.js
    -mdb.js
    -mdb.min.js
    -popper.min.js
 - scss

【问题讨论】：

发布您的 base.html 文件以查看静态链接
你说的是dev还是prod？在本地运行还是部署在服务器上？
@KrazyMax 开发者。在本地运行
@bmons {% include 'script.html' %} 在 base.html 上使用
我猜你的static_in_env 目录中有一个js 目录？不要犹豫，尽可能多地添加细节，例如你的 repo 的树。

标签： django django-2.2

【解决方案1】：

在settings.py中添加

 STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
 STATIC_URL = '/static/'
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
 MEDIA_URL = '/media/'

在base.html中

{% load static %}

如果不运行此命令，希望它会起作用

Python manage.py collectstatic

【讨论】：

已经这样做了。还是行不通。提出斜线也没有影响
如果在本地运行 python manage.py runserver，很遗憾，collectstatic 将无济于事！

【解决方案2】：

在您的project_name/urls.py 中，尝试在末尾添加以下内容：

urlpatterns = [
    # your urls...
]

# ↓ add this ↓
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

另外，只需将{% load static %} 放入您的script.html，而不是{% load static from staticfiles %}

【讨论】：

我在{% load static from staticfiles } 之前使用{% load static %}，有人建议这可能有效。

【解决方案3】：

如果你使用 bootstap，要么下载它，要么使用 cdn

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

或者你可以使用 bootstrap 提供的 starter 模板，它包含所有基本的 html、css 和 js 文件。链接：https://getbootstrap.com/docs/4.4/getting-started/introduction/ 自定义css链接可以链接到文件如下

<link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}"/>

【讨论】：

是的，它有效，但不是它应该的方式。仍然是一个不错的选择。谢谢
它适用于外部资源，但如果 OP 想要使用自定义静态文件，问题仍然存在。它不能解决 OP 问题！