Build and Deploy

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

Production Build link

  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 link

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 link

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 link

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 link

  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 link

• 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 link

• 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!