CODEWITHSUNDEEP
vue.jsvuejs2http-status-code-404vue-cli
Steve Bennett
Steve Bennett

Reputation: 126637

Serve a 404 page with app created with Vue-CLI

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?

Upvotes: 5

Views: 1702

Answers (1)

tony19
tony19

Reputation: 138636

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).

Upvotes: 9

Related Questions