首页 > 解决方案 > Django 静态文件 - 无法加载资源网络连接丢失

问题描述

我正在开发 Django Web 开发项目,我试图通过将所有静态文件放在 STATICFILES_DIRS 目录中来提供静态文件。静态目录结构如下:

静态/css:bootstrap-theme.min.css bootstrap.min.css
daterangepicker.css font-awesome.min.css
jquery.dataTables.min.css

静态/图像: sort_asc.png sort_asc_disabled.png
sort_both.png sort_desc.png sort_desc_disabled.png

静态/js: Chart.min.js daterangepicker.min.js
jquery.min.js moment.min.js bootstrap.min.js
jquery.dataTables.min.js jsapi
popper.min.js

静态/网络字体:fa-brands-400.eot fa-brands-400.ttf
fa-brands-400.woff2 fa-regular-400.svg fa-regular-400.woff
fa-solid-900.eot fa-solid- 900.ttf fa-solid-900.woff2 fa-brands-400.svg fa-brands-400.woff fa-regular-400.eot
fa-regular-400.ttf fa-regular-400.woff2 fa-solid-900 .svg
fa-solid-900.woff

设置.py:

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

网址.py

urlpatterns += staticfiles_urlpatterns()

包括如下静态文件:

{% load static %}
<script src="{% static 'js/jsapi' %}"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/popper.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/moment.min.js' %}"></script>
<script src="{% static 'js/daterangepicker.min.js' %}"></script>
<script src="{% static 'js/Chart.min.js' %}"></script>
<script src="{% static 'js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'application1/jquery.cookie.js' %}"></script>

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/daterangepicker.css' %}" />
<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" />
<link rel="stylesheet" href="{% static 'css/jquery.dataTables.min.css' %}" />
<link rel="stylesheet" href="{% static 'application1/style.css' %}"/>

得到错误: 在此处输入图像描述 在此处输入图像描述

以上错误直接导致:

[Warning] jQuery.Deferred exception: $('#table').DataTable is not a function. (In '$('#table').DataTable({"paging": true})', '$('#table').DataTable' is undefined) (2) (jquery.min.js, line 2)
"http://127.0.0.1:3000/:1771:45
j@http://127.0.0.1:3000/static/js/jquery.min.js:2:30004
http://127.0.0.1:3000/static/js/jquery.min.js:2:30314"
undefined
[Error] TypeError: $('#table').DataTable is not a function. (In '$('#table').DataTable({"paging": true})', '$('#table').DataTable' is undefined)
    (anonymous function) (jquery.min.js:2:31697)

这些错误并不总是可重现的,有时一切正常,因此问题不应该与静态文件路径和服务机制有关。请帮助我了解这里可能出了什么问题?

编辑:一些澄清:上面列出的错误不会每次都再次发生,有时其他一些库无法加载,这会导致不同的错误。这似乎更像是加载库的问题,而不是特定于库的任何问题。

标签: htmldjangostatic-files

解决方案


推荐阅读