无法将 django 中的 html 个文件连接到 .js 文件
[英]Cannot connect .js files with html files in django
问题描述
我无法将我的 index.js 文件与 Django 和 index.html 连接起来 Django 连接到 index.html 很好，但没有连接到 index.js。 我在下面附上了我的 settings.py、urls.py、index.html、webpack.config.js 和 index.js 文件。
设置.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
网址.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'))
]
索引.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
},
};
索引.js：
function component() {
const element = document.createElement('div');
element.innerHTML = 'Hello World';
return element;
}
document.body.appendChild(component())
我尝试将 settings.py 中的 DIRS 更改为
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'templates'),
os.path.join(BASE_DIR, 'static'),
]
但是我得到一个列表错误，如果我把它改成一个元组，我得到一个元组错误。
2 个解决方案
解决方案1
0 2022-11-29 21:49:40
谷歌了几个小时后，我想通了。
在templates下的settings.py文件中，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',
],
},
},
]
解决方案2
0 2022-11-29 21:55:06
您在 Settings.py 中的模板和 static 文件夹配置应该如下所示，模板和 static 文件夹都应该在根目录中。
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
无法在html中导入js文件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.