为什么Django项目中静态CSS正常加载但JavaScript文件不生效？

1 优先验证文件路径是否正确 #

• 确认style.js文件直接放在项目根目录下的static文件夹内，路径为BASE_DIR/static/style.js，不要存放在static/js等子目录下，否则会出现路径不匹配的404错误
• 打开浏览器F12开发者工具，切换到「网络」标签页刷新页面，查看style.js的请求状态：
  • 如果返回404：说明路径配置错误，核对文件存放位置
  • 如果返回200：说明文件可以正常加载，排查JS执行问题
• 可直接在浏览器地址栏访问http://127.0.0.1:8000/static/style.js，如果能看到alert("Checking");的内容说明静态文件服务正常

2 开发环境路由配置检查 #

如果是本地开发环境（settings.py中DEBUG = True），需要确认根urls.py中配置了静态文件路由：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你原本的路由配置
]

# 开发环境提供静态文件服务
if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS[0])

3 JS加载逻辑调整 #

你当前将script标签放在head内，可能因为加载阻塞没有执行，可以做以下调整：

方案1：移动script标签位置 #

将script标签移到</body>闭合标签之前，保证DOM加载完成后再执行JS：

<body>
    <!-- 页面其他内容 -->
    <script type='text/javascript' src="{% static 'style.js' %}"></script>
</body>

方案2：添加defer属性 #

给head内的script标签添加defer属性，让JS异步加载，等DOM解析完成后再执行：

<script type='text/javascript' src="{% static 'style.js' %}" defer></script>

4 缓存与浏览器设置检查 #

• 按Ctrl+Shift+R（Mac为Cmd+Shift+R）强制刷新页面，清除浏览器静态文件缓存
• 打开浏览器F12控制台标签页，查看是否有JS执行报错
• 确认浏览器没有禁用JavaScript功能

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