Uso de STATIC_URL

En primer lugar, STATIC_URL será la url donde se servirán los archivos estáticos. Entonces, si configura STATIC_URL='/' y luego navega a http://127.0.0.1:8000/index.html , esencialmente servirá index.html desde dentro de la carpeta estática de su aplicación Django. Si va a http://127.0.0.1:8000/ está en su 'raíz de carpeta estática' y, como puede ver, un índice de directorio está prohibido. Así que no uses STATIC_URL='/'

Ubicación de los archivos

El tutorial que siguió agrega la carpeta de compilación del SPA a las plantillas en su archivo Django settings.py .

Entonces deberías probar y agregar:

 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(os.path.dirname(BASE_DIR), 'frontend', 'dist')], # <== ADDED THIS 'APP_DIRS': True, 'OPTIONS': { # removed to keep this example small }, ]

o si desea señalar sus archivos estáticos como directorio de plantillas:

 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'static')], 'APP_DIRS': True, 'OPTIONS': { # removed to keep this example small }, ]

Sin embargo, no creo que sea una buena práctica, ya que los archivos estáticos (imágenes, JS, CSS) tienen su propia calificación en Django .

Nota sobre os.path

Además, para su STATICFILES_DIRS , no es así como funciona os.path.join() . El primer argumento debe ser una ruta que desea unir con uno o más componentes de ruta, los componentes luego se pasan como los siguientes argumentos. Además, BASE_DIR no está en el nivel de directorio correcto, como puede ver cuando imprimió la ruta BASE_DIR . Necesita el padre del directorio BASE_DIR . Para obtener la ruta del directorio principal , puede hacer os.path.dirname(BASE_DIR) , porque BASE_DIR es una ruta. Entonces aplicando esto obtenemos:

 STATICFILES_DIRS = [ os.path.join(os.path.dirname(BASE_DIR), frontend, dist), ]

nota final

Siento que podría ser un patrón anti tener su SPA servido por Django sin que sea completamente autónomo en Django BASE_DIR (de ahí el nombre, directorio base). Pero no sé la fuente para ello, o exactamente cuál es la mejor práctica para esto.

Causa de errores

Para el primer caso

 STATIC_URL = '/static/'

Django intenta buscar archivos estáticos en la carpeta backend/static/ solo en el caso de que se mencione algo con url con /static/ por ejemplo /static/css/* o /static/js/* en su index.html , pero ese no es el caso aquí index.html tiene referencias de archivo como /css/* y /js/* , por lo tanto, no se encuentran.

La razón por la que este caso funciona en el ejemplo del blog es por la misma razón, es decir, sus archivos de plantilla se mantienen en un directorio '../frontend/build y los archivos estáticos están en '../frontend/build/static', por lo tanto, el index.html buscará static/js/* en lugar de /js/* , por lo tanto, se accede a la ubicación de /static/ url en Django, que luego busca los archivos en backend/static correctamente

Es por eso que, en su código, configurándolo en el segundo caso, es decir

 STATIC_URL = '/'

obtiene las URL de los archivos estáticos correctamente en /css/* y /js/* e incluso su /index.html puede considerarse como un archivo estático, es decir, todas estas URL se consideran estáticas y se buscan en la carpeta backend/static/ y por lo tanto, aparece correctamente en el navegador.

Pero ahora las URL están desordenadas, es decir, esto:

 re_path('', TemplateView.as_view(template_name='index.html')),

puede tratarse como Django buscando esta ubicación: / , pero ya está reservado para buscar archivos estáticos y no incluir ningún nombre de archivo después de / significa que no está buscando ningún archivo.

Solución posible

Django permite patrones de URL personalizados, es decir, puede crear 2 nuevas variables en settings.py, es decir

 STATIC_URL = "/static/" STATIC_ROOT = os.path.join(BASE_DIR, "static/") STATIC_JS_URL = "/js/" STATIC_JS_ROOT = os.path.join(STATIC_ROOT, "js/") STATIC_CSS_URL = "/css/" STATIC_CSS_ROOT = os.path.join(STATIC_ROOT, "css/")

y luego configure su urls.py

 from django.contrib import admin from django.urls import include, path, re_path from django.views.generic import TemplateView from django.conf import settings from django.conf.urls.static import static urlpatterns = [ path('admin/', admin.site.urls), path('cockpit/', include("cockpit.urls")), re_path('', TemplateView.as_view(template_name='index.html')), ] urlpatterns += static(settings.STATIC_JS_URL, document_root=settings.STATIC_JS_ROOT) urlpatterns += static(settings.STATIC_CSS_URL, document_root=settings.STATIC_CSS_ROOT)

¡Lo primero es lo primero! Si desea servir su interfaz de usuario de Django como archivos estáticos para la producción, ¡es una mala idea! Debe considerar usar nginx o un servidor web similar para servirle archivos estáticos.

El TemplateView en su urls.py es un poco problemático. Dado que sus archivos estáticos se publican en STATIC_URL = '/static/' en su primer escenario, las direcciones URL de los archivos js y css no coinciden. Puede editar los archivos y colocar etiquetas de plantillas static dentro de index.hml , pero tampoco es una buena idea. Cuando realiza cambios en el lado de vuejs, debe compilar y reemplazar el paquete directamente y su sitio se actualiza. Entonces, esta línea debe eliminarse para siempre, index.html debe tratarse como un archivo estático:

 re_path('', TemplateView.as_view(template_name='index.html')),

Cuando cambió STATIC_URL = '/' , puede acceder a todos sus archivos estáticos. Si ejecuta django en debug = True , sirve archivos estáticos automáticamente. De lo contrario, debe agregar url conf estática al archivo. (¡NO LO OLVIDES, esto no es bueno para la producción!)

 from django.contrib import admin from django.urls import include, path, re_path from django.views.generic import TemplateView from django.conf import settings from django.conf.urls.static import static urlpatterns = [ path('admin/', admin.site.urls), path('cockpit/', include("cockpit.urls")), ] urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Con esta configuración, debe tener cuidado con las direcciones URL y los nombres de archivos estáticos. Podrían anularse entre sí.

PD: Gracias por una pregunta tan detallada.

Hay una forma tonta de solucionar este problema.

Este problema se trata de que el html creado por VueJS obtendrá js y css de rutas como estas /js/app.12312sd.js y /css/app.dsfeewj.css .

La configuración predeterminada de la ruta raíz del archivo estático es /static/ , por lo que solo necesita cambiar cada /js/... y /css/... en index.html manualmente o usar sed u otra cosa para reemplazarlos a /static/js/.../ y /static/css/.../ .

No puede reemplazar STATIC_URL a / porque es la URL raíz de su sitio web.

Después de editarlo, se verá así, y luego servidor su servidor django funcionará bien.

Antes de construir su interfaz, coloque css/ y js/ en un directorio llamado 'static' y deje index.html como está. Luego, cuando ejecutes yarn build , la estructura de tu directorio sería la siguiente:

 cockpit ├── backend/ │ ├── cockpit/ │ │ ├── views.py │ │ ├── css/ │ │ └── etc.. │ ├── settings/ │ │ └── settings.py │ └── manage.py └── frontend/ └── dist/ ├── static/ │ ├── css/ │ └── js/ └── index.html

Configure su BASE_DIR y un FRONTEND_DIR para que apunten hacia 'cockpit/frontend/dist' para un uso rápido más adelante.

 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) FRONTEND_DIR = os.path.join(os.path.dirname(BASE_DIR),'frontend','dist')

Ahora copie los archivos estáticos de frontend en su directorio de backend como lo hizo anteriormente:

 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(FRONTEND_DIR,'static/'), ] STATIC_ROOT = os.path.join(BASE_DIR, "static/")

O puede apuntar directamente su backend para servir desde el directorio frontend construido en lugar de copiarlo nuevamente. (De alguna manera siempre hago esto)

 STATIC_URL = '/static/' STATIC_ROOT = os.path.join(FRONTEND_DIR,'static/')

Incluya su directorio frontend construido en sus directorios de plantilla para que django pueda servir index.html

 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [FRONTEND_DIR], 'APP_DIRS': True, 'OPTIONS': { # removed to keep this example small }, }, ]

Ahora ejecuta tu servidor

 $ python manage.py collectstatic $ python manage.py runserver

Si luego decide implementar esto en línea, puede hacerlo fácilmente usando esta configuración configurando Nginx para servir archivos estáticos desde su directorio estático. Espero que esto ayude :)

Aclarando tu confusión en tu [EDITAR]

STATIC_ROOT apunta al directorio de su sistema. STATIC_URL se refiere a la URL en la que se accedería a sus archivos estáticos que están presentes en su STATIC_ROOT mientras usa su sitio web.

Digamos que tiene un archivo script.js en su directorio como se muestra

 cockpit ├── backend/ │ ├── cockpit/ │ │ ├── views.py │ │ ├── css/ │ │ └── etc.. │ ├── settings/ │ │ └── settings.py │ └── manage.py └── frontend/ └── dist/ ├── static/ │ ├── css/ │ └── js/ │ └── script.js └── index.html

y ha configurado su STATIC_ROOT para que apunte hacia 'cockpit/frontend/dist/static/'.

Ahora, si configura su STATIC_URL como 'static/' podrá acceder a ese script en http://127.0.0.1:8000/static/js/script.js

Alternativamente, si configura su STATIC_URL en 'xcsdf/' accederá a su archivo js en http://127.0.0.1:8000/xcsdf/js/script.js

Tuve este problema hace mucho tiempo y lo resolví con una solución simple. Es demasiado simple. Como veo, su carpeta estática no está en la raíz de su aplicación y está en el lugar equivocado. Póngalo en la raíz de su aplicación... porque Django está buscando la carpeta estática dentro de la raíz principal de su aplicación, donde se encuentra views.py. Tal vez tengas 5 aplicaciones o más. Django no se preocupa por la cantidad de aplicaciones que tiene, Django solo busca su carpeta estática en la raíz de su aplicación. Pero su carpeta de plantillas puede estar en la raíz de su proyecto. Entonces, coloque su carpeta estática en la raíz de su aplicación. En este caso me refiero al interior de la raíz de la cabina.

Y luego tienes que agregar estos cambios en settings.py

 PROJECT_NAME = '---Your projects name---' STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, PROJECT_NAME, 'static/') EXTERNAL_APPS = [ 'django.contrib.staticfiles', ]

Buena suerte.