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

In your webpack.dev.conf.js add historyApiFallback: true just above historyApiFallback: {...}. There were some changes in the configuration you can find it on github.

EDIT:

Try adding --history-api-fallback in package.json on line "dev": "webpack-dev-server --inline --history-api-fallback --progress --config build/webpack.dev.conf.js" and run npm install again. Or try creating new project with that args.

Note the missing --history-api-fallback on that line may have caused the issue. Hope this solves your problem. This was the only way I was able to solve my error.

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
    }
  }

};

I also had the same problem. Turns out if you use Htmlwebpack plugin in dev.config, the html is not automatically written into disk, so you would need a HtmlWebpackHarddiskPlugin and set alwaysWriteToDisk: true in HtmlWebpackPlugin:

new HtmlWebpackPlugin({
    template: 'index.html',
    title: 'You app',
    alwaysWriteToDisk: true,
}),
new HtmlWebpackHarddiskPlugin(),
new webpack.HotModuleReplacementPlugin()