使用Django模板调用static文件夹中JS文件时出现404 1804错误

问题描述 #

开发Django模板时，调用static文件夹中的current_time.js出现404 1804错误，但CSS文件可正常加载。

相关代码 #

current_time.js：

const displayTime = document.querySelector(".display-time");
// Time
function showTime() {
    let time = new Date();
    displayTime.innerText = time.toLocaleTimeString("en-US", { hour12: false });
    setTimeout(showTime, 1000);
}

showTime();

模板代码：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Personal Page</title> 
</head>
<body>
  <div class= "heading-container">
    <h1> Hi Thien </h1>
  </div>  
  <div class="container">
    <link rel="stylesheet" href="{% static 'style_time.css' %}">
    <div class="display-date">
      <h1>{% include 'personal_page_app/datetime.html' with date_time=date_time %}</h1>
    </div>
    <div class="display-time"></div>
  <script src="{% static 'current_time.js' %}"></script>
</body>
</html>

终端错误信息：

"GET /static/current_time.js HTTP/1.1" 404 1804

文件结构：

myproject:
    ....
myapp:
    static:
        current_time.js

排查与解决步骤 #

• 核对文件路径与命名
  确认current_time.js的文件名大小写和模板引用完全一致（Linux/macOS环境下Django区分文件名大小写）。另外，检查是否在static文件夹下创建了与app同名的子目录——Django默认优先查找static/[app名称]/下的静态文件，如果你的结构是myapp/static/myapp/current_time.js，模板引用需改为{% static 'myapp/current_time.js' %}。

• 检查settings.py配置

  1. 确保INSTALLED_APPS中包含你的myapp，Django只会自动识别已注册app下的static文件夹。
  2. 若静态文件未被自动识别，在settings.py中添加STATICFILES_DIRS配置：

     STATICFILES_DIRS = [
         BASE_DIR / 'myapp' / 'static',
     ]
     

• 执行collectstatic命令
  开发环境下runserver通常会自动加载app内的静态文件，但如果配置有异常，可执行python manage.py collectstatic命令，将所有静态文件收集到STATIC_ROOT指定的目录中（生产环境必须执行此步骤）。

• 验证引用路径
  在浏览器中查看页面源码，点击JS文件的链接，确认实际请求的URL是否与文件实际存储路径匹配，以此精准定位路径问题。

内容的提问来源于stack exchange，提问作者Thiện Nguyễn Bá