Django项目中HTML引入JS文件失败，报fun1未定义错误

以下是排查和解决的具体步骤：

• 修正static路径的斜杠问题
  你当前的JS引入代码是<script src="{% static '/js/coding.js' %}"></script>，开头的斜杠会导致路径拼接错误。Django的static标签会自动拼接STATIC_URL，加斜杠后最终路径会变成/static//js/coding.js（双斜杠），导致文件无法加载。把路径改成：

  <script src="{% static 'js/coding.js' %}"></script>
  

• 验证JS文件是否成功加载
  打开浏览器开发者工具（按F12），切换到「Network」标签，刷新页面，找到coding.js的请求：

  • 如果状态码是404，说明路径仍有问题，检查STATICFILES_DIRS配置是否指向你的静态文件目录（比如项目根目录下的static文件夹）
  • 如果状态码是200，点击请求查看响应内容，确认函数fun1确实存在且无语法错误

• 确认函数调用时机
  如果你是通过<body onload="fun1()">调用函数，确保JS文件的引入在body标签之前，或者把JS代码放在body末尾。也可以改用DOM加载完成事件调用，避免加载顺序问题：

  // 修改coding.js内容
  document.addEventListener('DOMContentLoaded', function() {
    fun1();
  });
  
  function fun1(){ 
    alert("It works!") 
  }
  

  同时去掉HTML里的onload属性，这样能更可靠地确保函数已加载。

• 检查Django静态文件配置
  确保settings.py里的配置正确：

  # 确保已添加该应用
  INSTALLED_APPS = [
      ...
      'django.contrib.staticfiles',
      ...
  ]
  
  # STATIC_URL配置
  STATIC_URL = '/static/'
  
  # 开发环境下配置静态文件目录
  import os
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'static'),
  ]
  

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