Vue 57: Production Build & Deployment
easy⏱ 5 mincoursevue
One command, one folder
npm run build runs Vite's production pipeline (type-checking via vue-tsc, bundling via Rollup, minification, content-hashed filenames for cache-busting) and emits a fully static dist/ folder - HTML, JS, CSS, and assets. Nothing about the app needs a Node server to run at request time, so it can be deployed to literally any static host.
# 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
Deploy anywhere
Netlify, Vercel, GitHub Pages, S3+CloudFront, or your own nginx box all just need to serve the contents of dist/ - point the host's build command at npm run build and its publish directory at dist, and you're done.
# netlify.toml
[build]
command = "npm run build"
publish = "dist"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Simulating the pipeline here
There's no real Rollup or file system in this browser sandbox, so the panel below is a scripted stand-in: real Vue state (ref/computed) drives a step-by-step progress UI, timed to feel like an actual build, ending with the same 'ready to deploy' message a real CI log would show.