Django中无法关联index.js与index.html的问题求助

问题概述 #

Django可正常渲染index.html，但无法加载通过Webpack打包生成的index-bundle.js文件；尝试修改settings.py静态文件配置时，出现列表/元组格式错误。

现有配置文件 #

settings.py #

from pathlib import Path
import os

BASE_DIR = Path(__file__).resolve().parent.parent

STATICFILES_DIR = os.path.join(BASE_DIR, 'static')
TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')

STATIC_URL = 'static/'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [STATICFILES_DIR,TEMPLATES_DIR,],
        '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',
            ],
        },
    },
]

DEBUG模式已开启（DEBUG=True）

urls.py #

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', TemplateView.as_view(template_name='index.html'))
]

index.html #

{% load static %}

<!doctype html>
<html>
  <head>
    <title>NEPTUNE Analytics</title>
  </head>
  <body>
    <script src="{% static 'index-bundle.js' %}"></script>
  </body>
</html>

webpack.config.js #

const path = require('path');

module.exports = {
  entry: './js/index.js',
  output: {
    path: path.resolve(__dirname, './static'),
    filename: 'index-bundle.js',
  },
};

index.js #

function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello World';
  return element;
}
document.body.appendChild(component())

尝试过的无效操作 #

修改settings.py静态文件配置为：

STATICFILES_DIRS = [
   os.path.join(BASE_DIR, 'templates'),
   os.path.join(BASE_DIR, 'static'),

]

出现列表错误，改为元组时又出现元组错误。

解决方案 #

1. 修正静态文件核心配置 #

Django识别的静态文件目录配置项是复数形式的STATICFILES_DIRS，你之前的代码定义了单数的STATICFILES_DIR，属于变量名错误；同时模板目录不需要加入静态文件路径，仅保留static目录即可。

修改settings.py对应部分：

# 替换原STATICFILES_DIR定义，使用正确的复数配置项
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

# 优化模板配置：移除静态目录，模板仅指向templates文件夹
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [TEMPLATES_DIR,],
        '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',
            ],
        },
    },
]

2. 确认Webpack打包结果 #

执行打包命令，确保index-bundle.js生成在static目录下：

npx webpack --mode development

检查项目根目录的static文件夹，确认index-bundle.js存在。

3. 验证静态文件可访问性 #

启动Django开发服务器后，直接访问http://localhost:8000/static/index-bundle.js：

• 若能看到JS代码，说明静态服务正常；
• 若返回404，检查STATIC_URL末尾是否带斜杠、STATICFILES_DIRS路径是否正确、打包文件是否确实在static目录中。

4. 确认模板静态标签渲染正确 #

查看页面源码，确认{% static 'index-bundle.js' %}被渲染为类似/static/index-bundle.js的有效路径，确保标签使用无误。

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