Django项目中HTML无法引用JS/CSS资源的问题求助

看起来你踩了Django静态资源管理的常见坑——把静态文件（JS/CSS）放到了templates目录里，这可不是Django期望的存放位置哦。下面一步步帮你搞定：

1. 调整静态文件的目录结构 #

首先，把你的JS、CSS等静态资源从templates目录里移出来，放到专门的static目录中：

• 在你的Django项目根目录（或者对应的app目录下）创建一个static文件夹
• 在static里创建子文件夹分类存放资源，比如static/js/、static/css/
• 把原来templates/js/main.js这类文件移动到static/js/下

2. 配置Django的静态文件设置 #

打开项目根目录的settings.py，确认以下配置：

• 确保INSTALLED_APPS里包含django.contrib.staticfiles（默认应该已经有了）
• 确认STATIC_URL的设置：

  STATIC_URL = '/static/'
  

• 如果你的static目录在项目根目录下，添加STATICFILES_DIRS配置（告诉Django去哪里找静态文件）：

  # Django 3.1+ 版本用路径对象
  from pathlib import Path
  BASE_DIR = Path(__file__).resolve().parent.parent
  
  STATICFILES_DIRS = [
      BASE_DIR / "static",
  ]
  
  # 旧版本Django用os.path
  # import os
  # STATICFILES_DIRS = [
  #     os.path.join(BASE_DIR, "static"),
  # ]
  

3. 修改HTML模板里的资源引用路径 #

在你的home.html开头，先加载Django的静态模板标签，然后修正JS/CSS的引用路径：

注意：必须先加载{% load static %}，否则无法使用static标签

修改前的引用（会导致404）：

<script src="/templates/js/main.js"></script>

修改后的正确引用：

{% load static %}
<!-- 其他HTML内容 -->
<script src="{% static 'js/main.js' %}"></script>

为什么原来的方式不行？ #

Django的templates目录是专门用来存放模板文件（就是那些会被Django渲染的HTML文件）的，Django不会自动把这个目录下的文件当作静态资源来提供访问。当你在浏览器里请求/templates/js/main.js时，Django找不到对应的路由和静态资源映射，自然就返回404了。

而static目录是Django官方推荐的静态资源存放位置，通过上面的配置，Django会把/static/开头的请求映射到你实际的静态文件目录，这样浏览器就能正确加载JS和CSS了。

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