Django应用如何正确链接JavaScript文件解决静态资源404报错

已完成多个HTML文件与CSS文件的关联，项目静态资源基础配置可正常运行，但尝试将item-store.js关联到item-store.html时抛出报错：Not Found: /item-store.js，暂未定位问题原因。

item-store.html 代码 #

{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    ...业务代码...
  </head>
  <body>
    ...业务代码...
    <script src="item-store.js"></script>
  </body>
</html>

settings.py 静态相关配置 #

INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app'
]
TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [BASE_DIR/'templates'],
    'APP_DIRS': True,
    'OPTIONS': {
        'context_processors': [
            'django.template.context_processors.debug',
            'django.template.context_processors.request',
            'django.contrib.auth.context_processors.auth',
            'django.contrib.messages.context_processors.messages',
        ],
    },
},
]
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "templates"),
)
MEDIA_ROOT = ''
MEDIA_URL = ''

报错核心原因是JS文件的引用路径不符合Django静态资源访问规则：
当前配置中STATIC_URL = '/static/'，所有静态资源的访问都需要带/static/前缀，而现有写法<script src="item-store.js"></script>是相对路径，浏览器会直接请求站点根路径下的/item-store.js，完全不会匹配到Django的静态资源处理路由，返回404是必然结果。
之前CSS能正常加载属于路径巧合，要么是CSS引用时写对了静态前缀，要么是CSS文件和HTML的相对路径刚好匹配，不能证明JS的写法正确。

• 修正HTML中的JS引用写法。既然模板开头已经加载了static模板标签，直接用标签生成标准静态资源路径即可，替换原有裸路径：

  <script src="{% static 'item-store.js' %}"></script>
  

  注意：如果JS文件存放在静态目录的子文件夹中（例如专门的js目录），需要补全相对路径，比如{% static 'js/item-store.js' %}，路径必须和文件在静态目录下的层级完全对应。
• 核对文件存放位置。当前配置的静态资源扫描目录是BASE_DIR/templates，要确保item-store.js确实存放在该目录或其子目录下，文件名拼写、大小写完全正确，不要出现文件放错目录、文件名多打空格/后缀错误这类低级问题。
• 校验环境配置。本地开发调试时要保证settings.py中DEBUG = True，Django才会自动托管静态资源请求；如果是生产部署环境，需要先执行python manage.py collectstatic收集所有静态资源，再通过web服务器配置静态资源目录的映射。
• 最终验证：修改完成后清空浏览器缓存刷新页面，打开浏览器开发者工具查看网络请求，确认JS的请求地址为/static/开头的正确路径，如果路径正确仍返回404，回到上一步重新核对文件位置和文件名拼写即可。

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