Why does Vue router / Webpack dev server shows Cannot GET /path on page refresh now?

Question

UPDATE:

It turns out it was a bug in the Vue webpack template on Windows, it will be fixed soon

---

Question:

I've started a new Vue project by installing it with vue init webpack projectName and now I keep getting: Cannot GET /path (on localhost) when I refresh a page.

For example, if I go to /contact I'll see the page's content, but as soon as I hit refresh I get Cannot GET /contact

More than that, you cannot simply type the route in the address bar manually now, you get the same error.

---

• I have mode: 'history'
• I see this on localhost (npm run dev)

---

It did work properly a few days ago. How do I make it work now?

All the answers on the internet are not useful (well maybe I didn't applied them properly)

---

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import Home from '@/components/Home'
import Contact from '@/components/Contact'

Vue.use(Router)
Vue.use(Vuetify)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

And because of this I cannot make this redirect work now as well:

{
  path: '*',
  redirect: '/'
}

I get the same error.

So I figured it might be the Vue Webpack's template fault, I've noticed that webpack.dev.conf.js is a bit different now and has lines like this now:

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    [...]

Which I would assume has something to do with it.

Answer 1

for those who have stumbled upon this problem via VUE CLI 3, add below code to vue.config.js and then re-run yarn run serve:

module.exports = {

  configureWebpack: {
    devServer: {
      historyApiFallback: true
    }
  }

};

Answer 2

This issue is coming when mode: "history" is being used with the Router. I know this is not the exact solution but yeah, if you are looking for some workaround, probably this might help.

Just remove mode: "history" and your issue will be resolved.