Deployment

Most Vue SPAs deploy as a folder of static files. Add a rewrite to index.html so client-side routes work on direct visits.

4 min read Level 2/5 #vue#deployment#hosting

What you'll learn

Pick a static host
Add an SPA fallback rewrite
Set base URL for non-root deploys

A Vue SPA is just static files. Upload dist/ to any CDN-backed host and you’re live. The only twist is SPA routing — you need to rewrite all unknown URLs back to index.html so Vue Router can take over.

Static Hosts

Cloudflare Pages, Netlify, Vercel, GitHub Pages, S3+CloudFront — all work great. Most auto-detect Vite projects, run npm run build, and serve dist/.

SPA Fallback

For Netlify, create public/_redirects:

/*  /index.html  200

For Vercel, vercel.json:

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

For nginx:

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

Without it, refreshing on /users/42 returns a 404 — the server has no file at that path.

Base URL for Subpaths

Deploying under /app/?

// vite.config.ts
export default { base: '/app/' }

And configure the router to match:

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

Environment Variables

Use Vite’s import.meta.env.VITE_* — only VITE_-prefixed vars are exposed to client code. Set them per environment in your host’s dashboard.

SSR

If you need SSR or SSG, drop the SPA approach and switch to Nuxt — its build outputs a Node server or static HTML depending on your config, and any Node-friendly host (Vercel, Cloudflare Workers, Render) deploys it directly.

Vue 2 → Vue 3 Migration →