When your Vue app is ready, Vite produces optimized static files you can deploy to any hosting platform.

Production Build 

  npm run build

This creates a dist/ folder with minified HTML, CSS, and JavaScript:

  dist/
├── index.html
├── assets/
│   ├── index-a1b2c3d4.js
│   └── index-e5f6g7h8.css
└── vite.svg

Preview locally before deploying:

  npm run preview

Open the URL shown (typically http://localhost:4173).

Environment Variables

Vite exposes env vars prefixed with VITE_:

.env.production:

  VITE_API_URL=https://api.myapp.com
VITE_APP_TITLE=My Vue App

Access in code:

  const apiUrl = import.meta.env.VITE_API_URL;

Never put secrets in VITE_ variables — they are embedded in the client bundle.

Base Path for Subdirectory Deploy

If your app is served from a subdirectory (e.g., example.com/my-app/):

vite.config.js:

  export default {
  base: '/my-app/',
};

Vue Router history mode needs the same base:

  createRouter({
  history: createWebHistory('/my-app/'),
  routes,
});

Deploy to Netlify

  1. Push your project to GitHub
  2. Connect the repo at netlify.com
  3. Build settings:
    • Build command: npm run build
    • Publish directory: dist
  4. Deploy

Add public/_redirects for SPA routing:

  /*    /index.html   200

Deploy to Vercel 

  npm install -g vercel
vercel

Or connect your GitHub repo in the Vercel dashboard with the same build settings.

vercel.json for SPA fallback:

  {
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Build Optimization Tips

  • Lazy load routes — () => import('./views/Admin.vue')
  • Analyze bundle size — npm install -D rollup-plugin-visualizer
  • Tree-shake unused code — import only what you need from libraries
  • Compress assets — most hosts enable gzip/Brotli automatically

Checklist Before Launch

  • Run npm run build without errors
  • Test with npm run preview
  • Verify environment variables in production
  • Confirm SPA fallback routing works
  • Check API URLs point to production endpoints

Your Vue app is ready for the world. Keep building!