template - vue django session
Desarrollando y desplegando la aplicación Vuejs con django (1)
Construí una aplicación web bastante simple en Vuejs , que se ejecutaba con su npm run dev predeterminado npm run dev con paquete web. La aplicación Vue estaba utilizando la API de Django que he creado usando django-rest-framework . Y cada vez que hubo un cambio en la aplicación Vue, se cargará en caliente automáticamente, lo cual es bastante asombroso.
Ahora me gustaría ejecutar la aplicación Vue usando django en lugar de webpack. Lo que quiero decir es que Django responderá con un archivo de plantilla html, y la aplicación Vuejs se ejecutará en ese archivo html para una aplicación de una sola página.
Lo que estoy haciendo ahora es ejecutar primero este comando:
npm run build
Luego copio los archivos dist / static / folder en la carpeta django static . Y finalmente cárguelo en la plantilla:
index.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
...
...
<link href="{% static "css/app.e446b60204fec1f9f5510c711523ffca.css" %}" rel=stylesheet>
</head>
<body>
<div id="app"></div>
<script src="{% static "js/manifest.88376ea5d07804f39ff7.js" %}"></script>
<script src="{% static "js/vendor.e0e5105739e9947a23e7.js" %}"></script>
<script src="{% static "js/app.571e9140518a5bae898c.js" %}"></script>
</body>
</html>
Ahora, más adelante, si necesito cambiar la aplicación Vue, tengo que compilarla de nuevo, copiar los archivos y cargarla dentro de la plantilla, lo que parece bastante largo.
Por lo tanto, espero que haya una manera mejor y más corta de mezclar Django y Vuejs.
Hay un gran artículo aquí que explica cómo ejecutar una aplicación Vue dentro de una plantilla django.
Explica básicamente cómo ejecutar todo, utilizando la última plantilla de la aplicación Vue provista con vue-cli. Los paquetes adicionales que se usan son django-webpack-loader para representar los paquetes js en la plantilla, y el webpack-bundle-tracker para permitir el reemplazo de módulos activos dentro de la aplicación django.
Puede jugar con los archivos estáticos de webpack / django configurados para ejecutar la aplicación vue desde cualquier ubicación y crear los archivos estáticos en la ubicación que se ajuste a su propósito.
Un paso adicional que tomé fue escribir una etiqueta de plantilla personalizada para ajustar la función render_bundle en django-webpack-loader. Para servir la aplicación después de una compilación de producción con paquete web, debe incluir:
{% render_bundle ''manifest'' %}
{% render_bundle ''vendor'' %}
{% render_bundle ''app'' %}
Esto arrojará un error al servir la aplicación desde el servidor de desarrollo webpack. La captura de esa excepción le permitirá fallar silenciosamente y podrá desarrollar todos los beneficios del servidor de desarrollo. P.ej.
from webpack_loader import utils
from webpack_loader.exceptions import WebpackBundleLookupError
from django.utils.safestring import mark_safe
@register.simple_tag
def render_bundle(bundle_name, extension=None, config=''DEFAULT'', attrs=''''):
try:
tags = utils.get_as_tags(bundle_name, extension=extension, config=config, attrs=attrs)
except WebpackBundleLookupError as e:
return''''
return mark_safe(''/n''.join(tags))