Building and Deploying a Vue App

Build for production

Vue apps compile to plain static files – HTML, CSS and JavaScript – that any web server can serve:

npm run build      # outputs to the dist/ folder

The build bundles and minifies your code, tree-shakes unused parts, and hashes filenames for cache-busting. The result in dist/ is entirely static.

Preview locally

npm run preview    # serve the production build to check it

Deploy the static files

Because the output is static, you have many options:

• A CDN/static host (Netlify, Vercel, Cloudflare Pages, GitHub Pages).
• An object store with static hosting (S3, OCI Object Storage).
• Your own Nginx or Apache – just point it at the dist/ folder.

The SPA routing gotcha

A single-page app handles routes like /about in the browser, but if a user refreshes that URL the server looks for a file /about that does not exist and returns 404. The fix is to tell the server to fall back to index.html for unknown routes:

# Nginx
location / {
  try_files $uri $uri/ /index.html;
}

Environment configuration

Keep API URLs and keys out of code using .env files. Variables prefixed with VITE_ are exposed to the app at build time:

VITE_API_URL=https://api.example.com

const url = import.meta.env.VITE_API_URL

Key points

• npm run build produces static files in dist/ – deployable anywhere.
• Host on a CDN, object store, or your own Nginx/Apache.
• Configure the server to fall back to index.html so SPA routes survive refresh.
• Use VITE_-prefixed .env variables for build-time configuration.