VueJS + Webpack Dev Server not able to hot reload url subpaths

Question

My application runs on the subdirectory http://localhost:8080/admin_suffix

suffix is a ENV variable which I can change and define in a .env file.

Once i run the webpack dev server, accessing http://localhost:8080/admin_suffix works.

Clicking on the hyperlinks in the SPA which points other subpaths works too. For example, I can navigate to http://localhost:8080/admin_suffix/subdirectory

However, when i hit reload on http://localhost:8080/admin_suffix/subdirectory, i will get an error "Cannot GET /admin_suffix/subdirectory"

I also cannot enter the subpath into the browser directly to load the page. Only ``http://localhost:8080/admin_suffix` works.

My configuration are as follows:

webpack.base.config.js:

  entry: {
    main: './src/main',
    vendors: './src/vendors'
  },
  devServer: {
        host: '0.0.0.0',
        disableHostCheck: true
  },
  output: {
    path: path.join(__dirname, '../dist')
  }

webpack.dev.config.js:

module.exports = merge(webpackBaseConfig, {
  output: {
    publicPath: '/',
    filename: '[name].js',
    chunkFilename: '[name].chunk.js'
  }
});

src/main.js:

const RouterConfig = {
    mode: 'history',
    routes: Routers,
    base: '/admin_suffix/'
}

Answer 1

Enable devServer.historyApiFallback in webpack.base.config.js:

devServer: {
  historyApiFallback: true,
  // ...
},

This configures webpack-dev-server to fallback to index.html when the route is not found (404).

The Vue app and router are initialized from the main page (index.html), so refreshing the page while on a subroute would normally result in a 404 because the router would not have been setup yet. However, the fallback configuration mentioned above would result in the index.html being served instead, allowing the router to be setup and the subroute to subsequently complete.