Desplegar Vue con Vite en Lizard

Despliega una app de Vue creada con Vite como un servicio web estático en Lizard. La compilación genera dist/, y nginx sirve los archivos en el puerto 80. Para renderizado del lado del servidor con Nuxt y rutas de servidor, usa la guía de Nuxt.

Preparar el proyecto

Ejecuta esto desde el directorio de la app de Vue con package.json, un lockfile y la configuración de Vite. Mantén el script de compilación del scaffold, incluido vue-tsc si comprueba tu código TypeScript. La compilación debe terminar generando el bundle de Vite en dist/.

Mantén base: '/' para un sitio en la raíz del dominio. Si usas un prefijo de ruta, alinea la base de Vite con la base del router y con la URL donde realmente se ejecuta la app. Un directorio de salida personalizado necesita un Dockerfile que copie ese directorio.

Comprobar la compilación localmente

npm ci
npm run build
npm run preview

Usa la URL de vista previa local para comprobar un componente que obtiene datos y una página a la que se llega mediante el router. vite preview es para esta comprobación local; nginx sirve los archivos de producción. Consulta la guía de despliegue de Vite para ver el comportamiento de la salida de compilación y de la vista previa.

Desplegar

Después de la configuración de la CLI, despliega el directorio fuente actual:

lizard init --name vue-app
lizard add --service web
lizard up --service web --port 80
lizard logs --build --service web --json
lizard ps --json

Excluye las dependencias locales, los archivos dist/ y .env de la subida. Si no hay sobrescrituras de comandos existentes, lizardpack detecta Vite y crea la imagen estática. No añadas npm run dev como comando de inicio del servicio.

Modo history de Vue Router

Si tu app usa createWebHistory, su servidor debe manejar las solicitudes directas a rutas del cliente. La imagen estática predeterminada sirve index.html cuando no puede encontrar un archivo, por lo que /account puede llegar a Vue Router en una recarga completa. Haz que la base del router coincida con la base de Vite, por ejemplo con createWebHistory(import.meta.env.BASE_URL). Consulta los modos history de Vue Router.

Prueba tanto la navegación desde la página de inicio como abrir /account en una pestaña nueva. Añade una vista comodín para las rutas de cliente que no existan. El fallback del servidor devuelve HTTP 200 incluso para rutas desconocidas; no proporciona respuestas 404 adecuadas para buscadores. Lee rutas estáticas y 404 antes de usar esta configuración para un sitio de contenido indexado.

Variables y solicitudes a la API

Vite escribe los valores VITE_* en el bundle del navegador durante la compilación. Úsalos solo para valores públicos, como la URL pública HTTPS de tu API. Configúralos mediante variables y secretos, y luego comprueba la solicitud de red real de la app recompilada. Un reinicio solo en tiempo de ejecución no puede reemplazar un valor dentro del JavaScript ya compilado.

Si las solicitudes fallan solo después del despliegue, comprueba CORS en la API y confirma que el navegador no esté llamando a localhost ni a un hostname privado del backend. Si el HTML carga pero fallan los recursos, inspecciona la base de Vite y las rutas de los recursos. Para páginas que necesitan HTML antes de que se ejecute JavaScript, elige el renderizado de Nuxt o un paso explícito de prerenderizado.

Consulta versiones probadas y resultados en la nube para las comprobaciones de despliegue del 9 de septiembre de 2026 y sus límites.