Vue-router: when using `mode: 'history'` and webpack-dev-server, I cannot reload the sub path.

[mobilesite]

When I using mode: 'history' to open the history mode, I can't reload the sub path(e.g. localhost:8080/settings), while a click on the <router-link to="/settings">Settings</router-link> can lead me to that page. The error page shows 'Cannot find /settings'.

const router = new VueRouter({
    routes,
    mode: 'history', // the default is hash mode，that will make URL urgly
});

I have successfully solved this problem by adding the config as followings to the config file of my nginx server when I am not using webpack-dev-server:

root   /Users/xxx/work/app/dist;
index  index.html;

location / {
    try_files $uri $uri/ /index.html;
}

My question is how to solve this problem when I am using webpack-dev-server(which can supply hot module replace service)? Should I only use mode: 'hash' when I am using webpack-dev-server?

[posva]

Please ask questions on the forum or StackOverflow.

---

You can inspire from the webpack template, more specifically this line: https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js#L54

[FourLeafClover]

@mobilesite did you find the way to resolve the problem?

[JounQin]

See https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback

[index23]

I am facing same issue also...

[yigexiaoairen]

When using the HTML5 History API, the index.html page will likely have to be served in place of any 404 responses. Enable devServer.historyApiFallback by setting it to true:
module.exports = { //... devServer: { historyApiFallback: true } };
See https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback