Конфигурация Django+Vue+webpack
Я пытаюсь создать проект, но почему-то не могу правильно соединить мой бэкенд с моим фронтендом
dev.py :
from .settings import *
DEBUG = True
ALLOWED_HOSTS = ["*"]
MIDDLEWARE.append("debug_toolbar.middleware.DebugToolbarMiddleware")
INSTALLED_APPS.append("debug_toolbar")
INTERNAL_IPS = ("127.0.0.1", "localhost")
WEBPACK_LOADER = {
"DEFAULT": {
"BUNDLE_DIR_NAME": "",
"STATS_FILE": os.path.join(BASE_DIR, "frontend/webpack-stats.json"),
# 'STATS_FILE': BASE_DIR.joinpath('frontend', 'webpack-stats.json'),
}
}
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
MEDIA_URL = "/dmedia/"
MEDIA_ROOT = os.path.join(BASE_DIR, "mediafiles")
STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
VUE_ROOT = os.path.join(BASE_DIR, "frontend\\static\\")
ВЫРЕЗАНО ИЗ settings.py :
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(
os.path.dirname(os.path.abspath(__file__))))
STATICFILES_ROOT = os.path.join(BASE_DIR, "staticfiles")
# Application definition
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
"django.contrib.contenttypes",
"django.contrib.sessions",
"django.contrib.messages",
"django.contrib.staticfiles",
"ObjectMgr",
"webpack_loader",
]
ROOT_URLCONF = "ObjectMgr.urls"
TEMPLATES = [
{
"BACKEND": "django.template.backends.django.DjangoTemplates",
"DIRS": [
os.path.join(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",
],
},
},
]
WSGI_APPLICATION = "ObjectMgr.wsgi.application"
# Database
# https://docs.djangoproject.com/en/3.2/ref/settings/#databases
DATABASES = {
"default": {
"ENGINE": "django.db.backends.sqlite3",
"NAME": os.path.join(BASE_DIR, "db.sqlite3"),
}
}
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = "/static/"
index.html :
{% load render_bundle from webpack_loader %}
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>frontend</title>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href="{% static 'favicon.ico' %}"> {% render_bundle 'chunk-vendors' %}
</head>
<body><noscript><strong>We're
sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong></noscript>
{% for i in 'abc' %}
<strong>{{ i }} DJANGO PART</strong>
{% endfor %}
<div id=app>
</div>
{% render_bundle 'app' %}
</body>
</html>
wsgi.py :
"""
WSGI config for ObjectMgr project.
It exposes the WSGI callable as a module-level variable named ``application``.
For more information on this file, see
https://docs.djangoproject.com/en/3.2/howto/deployment/wsgi/
"""
import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "ObjectMgr.settings")
application = get_wsgi_application()
urls.py :
import os
from django.conf import settings
from django.conf.urls import include, url
from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView
from django.views.generic.base import RedirectView
from django.views.static import serve
favicon_view = RedirectView.as_view(url=os.path.join(settings.STATIC_URL, "favicon.ico"), permanent=True)
urlpatterns = [
path("favicon.ico", favicon_view),
path("", TemplateView.as_view(template_name="index.html")),
path("admin/", admin.site.urls),
url(r"^static/(?P<path>.*)$", serve,
{"document_root": settings.STATIC_ROOT}),
url(r"^dmedia/(?P<path>.*)$", serve,
{"document_root": settings.MEDIA_ROOT}),
url(r"^media/(?P<path>.*)$", serve,
{"document_root": os.path.join(settings.VUE_ROOT, "media")}),
url(r"^img/(?P<path>.*)$", serve,
{"document_root": os.path.join(settings.VUE_ROOT, "img")}),
url(r"^js/(?P<path>.*)$", serve,
{"document_root": os.path.join(settings.VUE_ROOT, "js")}),
url(r"^css/(?P<path>.*)$", serve,
{"document_root": os.path.join(settings.VUE_ROOT, "css")}),
url(r"^fonts/(?P<path>.*)$", serve,
{"document_root": os.path.join(settings.VUE_ROOT, "fonts")}),
]
if settings.DEBUG:
import debug_toolbar
urlpatterns = [
url(r"^__debug__/", include(debug_toolbar.urls)),
] + urlpatterns
vue.config.js :
var BundleTracker = require('webpack-bundle-tracker')
var WriteFilePlugin = require('write-file-webpack-plugin')
module.exports = {
outputDir: (process.env.NODE_ENV === "production" ? 'dist' : 'static'),
publicPath: '/',
devServer: {
publicPath: "http://localhost:8080/",
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept, Accept-Encoding, Accept-Language, Access-Control-Request-Headers, Access-Control-Request-Method",
"Access-Control-Allow-Credentials": "true",
},
},
chainWebpack: config => {
config.optimization.splitChunks({
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\\\/]node_modules[\\\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
})
},
configureWebpack: {
output: {
filename: 'js/[name].js',
chunkFilename: 'js/[name].js'
},
plugins: [
new WriteFilePlugin(),
(process.env.NODE_ENV === "production" ?
new BundleTracker({
filename: 'webpack-stats-prod.json',
publicPath: '/'
}) :
new BundleTracker({
filename: 'webpack-stats.json',
publicPath: 'http://localhost:8080/'
})
)
]
}
}
first problem in index.html :
'staticfiles' is not a registered tag library. Must be one of:
admin_list
admin_modify
admin_urls
cache
i18n
l10n
log
static
tz
webpack_loader
если я изменю импорт с {% load static from staticfiles %} на {% load static from static %}, я получу другую ошибку, связанную с конфигурацией webpack, которую я не могу исправить
In template /ObjectMgr/templates/index.html, error at line 12
WebpackBundleLookupError at /
Cannot resolve bundle chunk-vendors.
Любая помощь в этом будет очень признательна!