Vue 57: Build de Producción y Despliegue
easy⏱ 5 mincoursevue
Un comando, una carpeta
npm run build ejecuta el pipeline de producción de Vite (chequeo de tipos con vue-tsc, empaquetado con Rollup, minificación, nombres de archivo con hash para invalidar caché) y genera una carpeta dist/ completamente estática - HTML, JS, CSS y assets. La app no necesita un servidor Node en tiempo de ejecución, así que se puede desplegar en literalmente cualquier hosting estático.
# terminal
npm run build
vite v5.4.10 building for production...
✓ 42 modules transformed.
dist/index.html 0.46 kB
dist/assets/index-4f9a1c2e.js 62.18 kB │ gzip: 24.03 kB
dist/assets/index-8b3d7a01.css 1.20 kB │ gzip: 0.61 kB
✓ built in 812ms
Despliega donde sea
Netlify, Vercel, GitHub Pages, S3+CloudFront, o tu propio servidor nginx - todos solo necesitan servir el contenido de dist/. Apunta el comando de build del hosting a npm run build y su directorio de publicación a dist, y listo.
# netlify.toml
[build]
command = "npm run build"
publish = "dist"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Simulando el pipeline aquí
Aquí no hay un Rollup real ni sistema de archivos, así que el panel de abajo es una simulación guionizada: estado real de Vue (ref/computed) impulsa una UI de progreso paso a paso, cronometrada para sentirse como un build real, y termina con el mismo mensaje de 'listo para desplegar' que mostraría un log de CI real.