Django项目中JS静态文件无法加载问题求助

以下是按优先级排序的排查与修复步骤：

1. 修复Script标签的拼写错误 #

这是最直接的问题：在countdown.html的scripts块中，script标签的属性写成了scr，正确应为src，且属性值需要用引号包裹（避免浏览器解析异常）：

{% block scripts %}
    <script src="{% static 'main.js' %}" defer></script>
{% endblock scripts %}

2. 确认静态文件目录配置正确性 #

• 检查settings.py中BASE_DIR的定义，确保它指向项目根目录（即包含static文件夹的site目录）。默认Django的BASE_DIR定义为：

  BASE_DIR = Path(__file__).resolve().parent.parent
  

• 确认STATICFILES_DIRS配置正确，当前配置STATICFILES_DIRS = [BASE_DIR / 'static']是正确的，因为static文件夹直接放在项目根目录下。

3. 确保开发环境静态文件服务生效 #

• 确认settings.py中DEBUG = True，static()辅助函数仅在DEBUG模式下会自动处理静态文件的访问路由；如果是生产环境，需要先执行python manage.py collectstatic将静态文件收集到STATIC_ROOT指定的目录。

4. 验证静态文件可直接访问 #

在浏览器中直接访问http://localhost:8000/static/main.js（根据你的开发服务器端口调整），如果能看到JS代码内容，说明静态文件服务正常；如果返回404，检查：

• 静态文件目录是否存在，main.js是否确实在static文件夹下
• STATIC_URL配置是否为'static/'（当前配置正确）

5. 强制清除浏览器缓存 #

尽管你已经尝试过清除缓存，仍可通过以下方式再次确认：

• 使用Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面
• 在浏览器开发者工具的「网络」面板中勾选「禁用缓存」，然后重新加载页面

6. 检查模板继承与块的正确性 #

确认countdown.html正确继承了base.html，且scripts块没有被其他模板覆盖，确保JS标签确实被渲染到最终的HTML中。你可以通过查看页面源代码，检查是否存在指向main.js的script标签。

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