Django中Bootstrap项目静态文件加载失败求助

核心问题定位 #

从服务器日志和你的代码来看，CSS文件因使用{% static %}标签能正确解析路径，但JS文件是硬编码绝对路径（比如/assets/vendor/purecounter/purecounter_vanilla.js），导致服务器直接去网站根目录寻找/assets/路径，而非Django静态文件的正确URL前缀（默认是/static/），因此返回404。

另外你的CSS引用存在小问题：部分<link>标签缺少rel="stylesheet"属性，这会导致这些CSS文件无法被浏览器正确加载（比如vendor目录下的CSS）。

分步解决步骤 #

1. 修正JS文件的引用方式 #

找到HTML中所有引用JS的代码（通常在<body>末尾），把硬编码路径替换为{% static %}标签：

<!-- 错误写法 -->
<script src="/assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="/assets/vendor/aos/aos.js"></script>

<!-- 正确写法 -->
<script src="{% static 'assets/vendor/purecounter/purecounter_vanilla.js' %}"></script>
<script src="{% static 'assets/vendor/aos/aos.js' %}"></script>

2. 补全CSS引用的rel属性 #

修改所有vendor CSS的<link>标签，添加rel="stylesheet"：

<!-- 错误写法 -->
<link href="{% static 'assets/vendor/aos/aos.css' %}">

<!-- 正确写法 -->
<link href="{% static 'assets/vendor/aos/aos.css' %}" rel="stylesheet">

3. 验证Django静态文件配置 #

检查项目settings.py中的静态文件相关配置，确保以下项正确：

# settings.py
STATIC_URL = '/static/'

# 若assets放在app的static目录下（即Portfolio/static/Portfolio/static/assets），无需额外配置STATICFILES_DIRS
# 若放在项目根目录的static文件夹，可添加：
# STATICFILES_DIRS = [
#     BASE_DIR / "static",
# ]

批量引用优化方案 #

• 无需重复加载static标签：只要在模板最顶部写一次{% load static %}，整个模板文件内都可以使用{% static %}标签，不需要每个文件单独添加。
• 模板片段复用：把所有静态文件的引用（CSS、JS）提取到单独的模板片段中，比如创建templates/includes/static_files.html：

  <!-- templates/includes/static_files.html -->
  <!-- Favicons -->
  <link href="{% static 'assets/img/favicon.png' %}" rel="icon">
  <link href="{% static 'assets/img/apple-touch-icon.png' %}" rel="apple-touch-icon">
  
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  
  <!-- Vendor CSS Files -->
  <link href="{% static 'assets/vendor/aos/aos.css' %}" rel="stylesheet">
  <link href="{% static 'assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
  <!-- 其他CSS引用... -->
  
  <!-- Template Main CSS File -->
  <link href="{% static 'assets/css/style.css' %}" rel="stylesheet">
  
  <!-- Vendor JS Files -->
  <script src="{% static 'assets/vendor/purecounter/purecounter_vanilla.js' %}"></script>
  <script src="{% static 'assets/vendor/aos/aos.js' %}"></script>
  <!-- 其他JS引用... -->
  
  <!-- Main JS File -->
  <script src="{% static 'assets/js/main.js' %}"></script>
  

  然后在index.html中通过include引入：

  {% load static %}
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Siddharth D</title>
    <!-- 引入静态文件片段 -->
    {% include 'includes/static_files.html' %}
  </head>
  <!-- 页面内容... -->
  </html>
  

• 进阶优化：可以使用django-compressor库合并、压缩静态文件，减少HTTP请求数量，提升加载速度。

内容的提问来源于stack exchange，提问作者Nugget