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?

No, just the standard stuff that comes with a default `vue create`. — Steve Bennett, Dec 13 '18 at 23:34

score 9 · Accepted Answer · answered Dec 14 '18 at 00:48

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:

Create vue.config.js (if it doesn't exist already) with the following contents:
```
module.exports = {
  devServer: {
    historyApiFallback: false
  }
}
```
Restart your dev server (npm run serve).

Serve a 404 page with app created with Vue-CLI

1 Answers1

Linked