无法在django中将.js文件与html文件连接

7kjnsjlb  于 2022-12-01  发布在  Go
关注(0)|答案(2)|浏览(127)

我无法将我的index.js文件连接到Django和index.html Django可以连接到index.html,但无法连接到index.js。我在下面附上了我的settings.pyurls.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',
            ],
        },
    },
]

在www.example.com中settings.py调试=真
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())

我已尝试将www.example.com中的DIRS更改settings.py为

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

]

但是我得到了一个列表错误,如果我把它改为元组,我就会得到元组错误。

rqqzpn5f

rqqzpn5f1#

在谷歌了几个小时之后,我发现了。
在模板下的settings.py文件中,DIRS不应包含STATICFILES_DIRS,而应仅包含模板文件夹的路径。
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',
        ],
    },
},
]
sq1bmfud

sq1bmfud2#

您在www.example.com中的模板和静态文件夹配置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"]

每当您想在html文件中链接一个js或css文件时,您可以使用如下代码:

/static/文件所在文件夹的名称/file-name

请参见以下示例

/static/js/index.js

相关问题