Django应用部署Heroku后JS文件加载失败问题求助

我之前也碰到过几乎一模一样的情况，咱们一步步排查解决：

1. 先补全STATICFILES_DIRS配置 #

你的settings.py里缺少了STATICFILES_DIRS的定义，Django默认只会收集每个app下static目录的文件，如果你的项目根目录还有一个全局的static文件夹（放了本地JS、公共静态资源），必须告诉Django去哪里找它们：

# 在settings.py里添加
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

这个配置是collectstatic命令的关键——如果没加，你的本地JS文件根本不会被收集到staticfiles目录里，Heroku上自然找不到。

2. 检查Whitenoise中间件顺序 #

Whitenoise的中间件必须放在正确的位置才能生效，打开settings.py的MIDDLEWARE列表，确保它在CommonMiddleware之前：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',  # 这个要放在这里！
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 其他中间件保持不变...
]

如果顺序错了，Whitenoise无法正确处理静态文件请求，会导致JS返回404。

3. 确认模板中JS的引用方式 #

确保模板里的本地JS是用Django的static模板标签引用的，绝对不能硬编码路径：

<!-- 正确写法 -->
<script src="{% static 'js/your-local-script.js' %}"></script>
<!-- Bootstrap CDN的JS也要确认链接是有效的，比如用官方稳定链接 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

另外别忘了在模板开头加载static标签：{% load static %}。

4. 强制重新收集静态文件 #

有时候之前的collectstatic可能没收集全，先在本地清理再重新收集：

python manage.py collectstatic --clear

然后重新部署到Heroku：

git add .
git commit -m "Fix static file collection"
git push heroku master

部署完成后可以用Heroku命令验证文件是否存在：

heroku run ls staticfiles/js

如果能看到你的JS文件名，说明收集成功了。

5. 检查Heroku日志定位问题 #

如果上面的步骤都没用，直接看Heroku的实时日志，找404错误：

heroku logs --tail

当你刷新页面或点击按钮时，看日志里有没有类似GET /static/js/xxx.js 404的记录——这能直接告诉你是文件没找到，还是有其他请求拦截的问题。

额外注意点 #

• 部署到Heroku时必须把DEBUG设为False，可以在settings.py里加：

  DEBUG = os.environ.get('DEBUG', 'False').lower() == 'true'
  

  同时ALLOWED_HOSTS要包含你的Heroku域名：

  ALLOWED_HOSTS = ['your-app-name.herokuapp.com', 'localhost', '127.0.0.1']
  

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