Serve a 404 page with app created with Vue-CLI

Question

I'm using Vue-CLI to create Vue apps. One behaviour I don't like is that any non-existing URL (eg, localhost:8080/nonexistent/file.html) gets served, with code 200, as if it was the root: localhost:8080.

This makes debugging XHR requests really messy sometimes.

How can I make it return a 404 code?

Answer 1

The feature you're observing is actually from webpack-dev-server's historyApiFallback, which responds with index.html for unresolved URLs (intended for SPAs with client-side routing). This is enabled by default in Vue CLI projects, but you can disable it with a Vue CLI devServer config:

1. Create vue.config.js (if it doesn't exist already) with the following contents:

   module.exports = {
     devServer: {
       historyApiFallback: false
     }
   }
   

2. Restart your dev server (npm run serve).