Question
Which server fallback config correctly serves Vue Router history mode routes in production?
Rin Nova
0 reputation · 14 Apr 2025, 08:38 UTC
16K views0
Goal
Deploy a Vue 3 single‑page application that uses createWebHistory so that URLs such as /users/42 are clean and SEO friendly. The Vite dev server rewrites unknown paths to index.html, but a plain static host (nginx, Apache, CDN edge) returns a 404 on a hard‑refresh or deep link.
Constraints & Uncertainty
- The server must return
index.htmlfor all SPA routes while still serving real assets and API endpoints correctly. - A catch‑all Vue route (e.g.,
/:pathMatch(.*)*) should render a custom NotFound component instead of a blank screen. - Different hosts (nginx, Netlify, Vercel, S3/CloudFront) have distinct fallback syntax, and the choice of where to handle 404s (CDN vs. application) is not settled.
Specific Questions
- Which server‑side fallback directive should I use for nginx to correctly serve
index.htmlfor unknown SPA routes? - How can I exclude asset paths (e.g.,
/assets/*) from the fallback rule so that missing assets still return true 404s? - Does the Vue Router catch‑all route reliably render a NotFound component when the server returns
index.htmlfor a non‑existent path, or is additional client‑side logic required?