Which server fallback config correctly serves Vue Router history mode routes in production?

Answer

Use the nginx directive try_files $uri $uri/ /index.html; inside a location / block.

Why this works

When a request does not map to an existing file ($uri) or directory ($uri/), nginx falls back to serving /index.html. The Vue application then boots and Vue Router matches the original URL, rendering the appropriate view or the catch‑all NotFound component.

Steps to configure

1. Open your nginx site configuration (e.g., /etc/nginx/sites-available/myapp).
2. Ensure a location / block exists; replace or add:

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

Exclude asset paths from the fallback

Place a more specific location block for your asset folder (or common static extensions) before the catch‑all block so that requests for real files are served directly and missing assets return a genuine 404.

location /assets/ {
    # optional: set expires, add_header Cache-Control, etc.
}

# Alternatively, match by extension
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|webmanifest)$ {
    # same as above
}

Because nginx processes location blocks in order of specificity, these blocks take precedence over the generic location / fallback.

Vue Router catch‑all behavior

Define a catch‑all route as the last entry in your router:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/users/:id', component: UserDetail },
    // … other routes
    { path: '/:pathMatch(.*)*', component: NotFound }
  ]
});

When nginx returns index.html for a non‑existent path, the router boots, sees the URL (e.g., /users/42) and matches the :pathMatch(.*)* pattern only if no earlier route fits, rendering the NotFound component. No extra client‑side logic is required.

Verification

1. Test the config: sudo nginx -t && sudo systemctl reload nginx.
2. Hard‑refresh a deep link, e.g., https://example.com/users/42; you should receive a 200 response with the index.html body and the URL stays unchanged.
3. Request an existing asset, e.g., https://example.com/assets/app.js; verify a 200 with the JavaScript file, not index.html.
4. Request a bogus path that is not an asset, e.g., https://example.com/nonexistent; confirm a 200 with index.html and that the rendered page shows your NotFound component.