Невозможно соединить .js файлы с html файлами в django

Я не могу соединить мой файл index.js с Django и index.html. Django подключается к index.html нормально, но не к index.js. Я прикрепил свои файлы settings.py, urls.py, index.html, webpack.config.js и index.js ниже.

settings.py:

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

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

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/

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',
            ],
        },
    },
]

В settings.py 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',  // path to our input file
  output: {
    path: path.resolve(__dirname, './static'),  // path to our Django static directory
    filename: 'index-bundle.js',  // output bundle file name
  },
};

index.js:


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

Я пробовал изменить DIRS в settings.py на

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

]

но я получаю ошибку списка, а если я меняю его на кортеж, то получаю ошибку кортежа.

После многочасового гугления я понял это.

В файле settings.py в разделе templates, DIRS не должен включать STATICFILES_DIRS и включать только путь к папке templates.

STAICFILES_DIRS должен быть там, но не вызываться в DIRS

Мой settings.py теперь выглядит следующим образом:

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent

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

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.1/howto/static-files/

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',
        ],
    },
},
]

Ваша конфигурация шаблонов и статических папок в Settings.py должна выглядеть следующим образом, и обе папки должны находиться в корневом каталоге.

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": ["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 = [BASE_DIR / "static"]

Когда вы хотите связать js или css файл в вашем html файле, вы используете что-то вроде этого

/static/имя папки, в которой находится файл/имя файла

См. пример ниже

/static/js/index.js
Вернуться на верх