Problema de recursos estáticos de Django+Vue
Usando Django 2.2.
En términos generales, use el comando npm run build para obtener el paquete dist empaquetado y entréguelo a nginx para la conversión de enrutamiento (configurando la ubicación /static). Todo lo que necesita es configurar la ruta index.html accesible. en django.
Pero por necesidad (?), quiero probar localmente, es decir depurar en un entorno sin nginx y activar debug = True. Entonces abrí python Manage.py Runserver. Como resultado, la página de bienvenida no apareció cuando entré a la página de inicio. Cuando abrí las herramientas de desarrollo, la pantalla se veía así:
Solución: simplemente registre vue. carpeta del proyecto en INSTALLED_APPS.
Si la aplicación no está registrada, django no escaneará la carpeta (excepto el directorio raíz) incluso si está escrito:
Como se muestra arriba, he escrito blogfro en STATICFILES_DIR ( Es decir, el directorio de archivos vue), la carpeta estática después de completar el empaquetado, pero la pantalla aún está en blanco al ingresar a la página de inicio.
Una pantalla blanca significa que la ruta de la plantilla PLANTILLAS es normal, pero el archivo estático aún no se puede cargar. Esto requiere registrar la aplicación. Después del registro, puede escanear archivos estáticos.
Después del registro, la página de inicio se mostró correctamente:
Cuando la aplicación no estaba cargada, encontré que colocar los archivos css y js en una carpeta estática de la aplicación registrada (backend) Puede mostrarse normalmente. Esto verifica que el escaneo de carpetas estáticas requiera una aplicación registrada.
Tome mi proyecto como ejemplo:
En modo de depuración, solo se necesitan STATIC_URL y STATICFILES_DIR.
Según la documentación de Django, STATIC_URL es un mapeo de rutas. El servidor tratará la ruta que coincide como una solicitud de archivo estático, luego buscará en el directorio especificado por STATICFILES_DIR y siempre intentará devolver el primer resultado coincidente.
En el modo de producción (depuración desactivada), las referencias a archivos estáticos dejarán de ser válidas. En otras palabras, por motivos de rendimiento, no utilizamos el servidor Django para solicitudes de recursos estáticos. A menudo utilizamos otros servidores anti-generación para el envío.
Por esta razón, Django usa la directiva Collectstatic, que puede empaquetar todos los archivos bajo STATICFILES_DIR en STATIC_ROOT. Después de eso, simplemente configure el servidor anti-generación para aplicar esta carpeta estática.
Después de eso, puede desarrollar blogfro directamente. Una vez completado el desarrollo, use npm run build y luego abra directamente el servidor django para realizar pruebas. Cuando finalmente empaquete y se conecte, copie el contenido de dist a STATIC_ROOT y luego ejecute python Manage.py Collectstatic (principalmente para recopilar los recursos del administrador).
De hecho, el problema no está completamente resuelto, pero es causado por vue + django.
Django utiliza su propio índice de ruta estático, que seguramente entrará en conflicto con vue y debe depurarse para poder manejarlo.
Usar django y vue significa que desea separar el front-end y el back-end, por lo que el proceso de desarrollo en sí está aislado. La intersección entre las dos partes debe ser la implementación final (empaquetado de vue, django activado en modo de producción, servidor antigeneración activado (como nginx)). En este momento, la carpeta estática es administrada por el servidor de generación inversa y tales problemas no ocurrirán.
Como solo soy una persona (demasiado miserable), tengo la necesidad de depurar vue y django al mismo tiempo, lo que lleva al problema anterior.