Django项目：JS移至static文件夹后无法加载问题求助

问题概述 #

将原本内嵌在HTML中的JavaScript代码移至static文件夹的spots.js后，文件无法加载，浏览器网络面板无请求记录，但直接通过服务器路径可访问该文件，项目处于Debug模式。

现有配置 #

settings.py #

STATIC_URL = '/users/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'var', 'static')

urls.py #

urlpatterns = [
    path('', home, name='users-home'),
    path('register/', RegisterView.as_view(), name='users-register'),
    path('profile/', profile, name='users-profile'),
    path('select-spots/', select_spots, name='select-spots'),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

select_spots.html引用代码 #

{% extends 'users/base.html' %}
{% load static %}

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

解决步骤 #

1. 修正script标签的位置 #

Django模板中{% extends %}必须是第一行有效代码，且自定义内容需放入base.html预留的block块中。若直接在{% load static %}后写script标签，会被base.html的内容覆盖，导致浏览器无法解析该标签。

修改示例：

{% extends 'users/base.html' %}
{% load static %}

{% block content %}
<!-- 页面内容区域 -->
{% endblock %}

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

同时确保base.html中定义了{% block script %}{% endblock %}（建议放在</body>标签前）。

2. 修正静态文件引用路径 #

根据项目文件夹结构，spots.js直接位于根目录的static文件夹下，无需myapp前缀，正确引用应为：

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

可通过在模板中输出{% static 'spots.js' %}查看渲染后的URL，确认是否为/users/static/spots.js，直接访问该URL验证文件是否可正常打开。

3. 验证静态文件目录配置 #

确认spots.js确实存放在BASE_DIR/static/目录下，STATICFILES_DIRS配置的路径与实际文件位置匹配。

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

Debug模式下Django默认禁用静态文件缓存，但浏览器可能留存旧缓存，按Ctrl+Shift+R强制刷新页面，查看网络面板是否出现JS文件请求。

5. 无需运行collectstatic（Debug模式） #

Debug模式下Django直接从STATICFILES_DIRS指定目录读取静态文件，collectstatic命令仅用于生产环境收集静态文件，无需执行。

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