Despliegue en plataformas de hosting

Una SPA de Vue se compila en archivos estáticos, por lo que puede alojarla en cualquier servidor de archivos estáticos. Plataformas como Netlify, Vercel y GitHub Pages permiten desplegar estos archivos de forma rápida y, a menudo, gratuita.

Debe desplegar el contenido de la carpeta dist producida por npm run build. El servidor distribuye estos archivos mediante una CDN a usuarios de todo el mundo.

Netlify puede compilar a partir de su repositorio de Git. Solo debe indicarle el comando de compilación y la carpeta que debe publicar.

Vercel detecta automáticamente los proyectos de Vite. Conecte su repositorio y Vercel ejecutará la compilación y servirá el resultado, volviendo a desplegarlo con cada push.

GitHub Pages sirve archivos estáticos desde un repositorio. Compile localmente o en CI y, después, suba el resultado de dist a la rama de Pages o use una acción.

Vue Router en modo history crea URL limpias como /about. Sin embargo, un servidor estático no tiene un archivo real /about, por lo que una visita directa o una actualización devuelve un error 404.

La solución consiste en indicar al servidor que sirva index.html para todas las rutas, de modo que Vue Router gestione el enrutamiento en el cliente.

En Netlify, añada un archivo _redirects (o una regla en netlify.toml) que reescriba todas las rutas a index.html.

En Vercel, una reescritura en vercel.json consigue el mismo fallback hacia index.html.

Si su aplicación se sirve desde una subruta (algo habitual en GitHub Pages, como /my-repo/), configure la opción base en la configuración de Vite para que las URL de los recursos se resuelvan correctamente.

Automatice los despliegues mediante integración continua. Un flujo de trabajo instala las dependencias, ejecuta las pruebas, compila y publica con cada push a su rama principal, de modo que la publicación no requiera intervención manual.

Compruebe sus conocimientos sobre el despliegue.

Despliegue la carpeta dist en un servidor de archivos estáticos como Netlify, Vercel o GitHub Pages. Añada un fallback para SPA (una redirección o reescritura a index.html) para que las rutas del modo history funcionen al actualizar la página, configure la opción base de Vite para alojamientos en subrutas y automatícelo todo con CI. A continuación, supervisará y mantendrá la aplicación en producción.