Npm run dev "Cannot GET /config" - vue router history mode

I just wanted to setup my vue project with the webpack template and use vue router to create different pages for my app.

The src/router/index.html is the following:

import Vue from 'vue';
import Router from 'vue-router';
// eslint-disable-next-line
import Home from '../pages/home.vue';
// eslint-disable-next-line
import Config from '../pages/config.vue';

Vue.use(Router);

export default new Router({
  mode: 'hash',
  routes: [
    { path: '/', component: Home },
    { path: '/config', component: Config },
  ],
});

When I do npm run dev and access the above routes, I have the following output:

But when I use the history mode, I can’t access to the /config url:

And the console doesn’t show any error:

Can someone help me solve this problem?

I just found exactly the same problem. When I transferred the entire project to a Linux machine (with a deletion of node_modules directory and npm install), it works perfectly, as I would expect. This seems to be a Windows 10 problem for me. Did you manage to get a solution?

Show your webpack config, or make it like:

module.exports = {
    devServer: {
        contentBase: './appout',
        host: '0.0.0.0', 
        port: 88,
        historyApiFallback: true, // is it enabled ?
        inline: true
    }
}

The historyApiFallback solved the problem … thanks very much :slight_smile:

If I understand, I should change webpack.dev.conf.js here:

historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, ‘index.html’) },
],
},

Should I change all to true? I tried, but I’m using params and I get a blank page.

for those who have the problem with VUE CLI 3, add the following code to your vue.config.js and run again yarn run serve:

module.exports = {

  configureWebpack: {
    devServer: {
      historyApiFallback: true
    }
  }

};

As that’s enabled by default, I’m not sure why that should fix anyting.