0
256
ViewsEjecutar una aplicación Vue desde una plantilla de Golang/Gin
Específicamente estoy ejecutando Vue y Golang/Gin, pero esta pregunta se puede ver de manera más amplia como "ejecutar un marco JS dentro del flujo de plantillas de un marco web"
Me encargaron convertir la aplicación Golang/Gin algo compleja de una startup en una aplicación web más moderna. Como suele suceder con estas cosas, la aplicación Gin es demasiado complicada para convertirla directamente en un SPA con una API, por lo que tenemos que eliminar las características individuales pieza por pieza. Como la mayoría de los sitios web, todas las páginas HTML de la aplicación Gin tienen un diseño con encabezado, pie de página y barra lateral en común, con el área de "contenido" que cambia de una página a otra. El área de contenido suele ser material CRUD estático, pero hay una buena cantidad de Vanilla JS personalizado mezclado en muchas de las vistas, lo que entorpece un poco el trabajo cuando se intenta incorporar un marco JS moderno.
LO QUE ME GUSTARÍA HACER es ejecutar una aplicación Vue dentro de ese div de "contenido", lo que parece simple, pero esto ha resultado un poco desafiante para mí. Mantengo todo mi código de vista en un subdirectorio del repositorio de Gin porque no quiero que el código de la aplicación y crear una canalización entren en conflicto con los activos JS de Vanilla existentes De forma predeterminada, las aplicaciones de Vue se compilan en un archivo index.html, así que probé para incluir eso como plantilla, go Gin no era fanático de eso y seguía dándome un error de que no se podía encontrar la plantilla
Estoy pensando que la mejor solución es probablemente compilar mi aplicación Vue en un archivo index.js, que apunta a un elemento en la plantilla por ID y ejecuta la aplicación Vue allí. Entonces simplemente podría incluir ese archivo JS en una etiqueta de secuencia de comandos en la plantilla.
Lo que me está retrasando es que estoy un poco abrumado por la canalización de compilación de webpack/babel/JS , por lo que no estoy exactamente seguro de cómo debo lograr esto o qué herramientas debo usar para que esto suceda. He estado investigando 'vue-loader', que parece ser al menos parcialmente lo que quiero (transpilar Vue en JS puro), pero todavía me estoy rascando un poco la cabeza.
Cualquier ayuda es apreciada. Traté de ser lo más claro posible sobre mi problema aquí, pero estoy feliz de responder cualquier pregunta de seguimiento. Adjunto hay una ayuda visual de lo que me gustaría lograr. ¡Gracias y feliz codificación!
Aquí hay un diagrama que muestra lo que me gustaría hacer.
Lo que estoy tratando de lograr:
1 answers
Answer question0
Pude hacerlo funcionar usando vue-loader y webpack, compilando mi aplicación en un solo archivo index.js , con un punto de entrada que se ve así:
import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App), }).$mount('#webapp')luego invocando en una plantilla como esta:
<div id="webapp">Failed to load Vue</div> <script src=/webapp/dist/index.js></script>Solo funciona si la etiqueta del script está DESPUÉS del div, o Vue no podrá encontrar el elemento. También tuve que agregar lo siguiente en main.go para que pudiera leer el JS
r.Static("/webapp", "./webapp")Con todo, terminó siendo una solución bastante simple, ¡las minucias de la configuración simplemente me retrasaron! Estoy seguro de que me encontraré con algún tipo de problema al llevar esto a producción, pero ese es un problema de mañana.