Webpack trying to load build.js from subdirectory

Question

I'm setting up a basic vue app with vuetify/vue-router, and when loading the base url '/', everything works fine. I can click a to /manage/products without any problem.

However, when loading /manage/products directly by typing in the address bar, I get this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

It seems to want to load /manage/dist/build.js instead of /dist/build.js.

Can I change my webpack.config.js to make sure the right build.js is called?

output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: 'build.js'
},
resolve: {
  extensions: ['.js', '.vue'],
  alias: {
    '@' : path.resolve(__dirname, './src'),
    'vue$': 'vue/dist/vue.esm.js',
    'public': path.resolve(__dirname, './public')
  }
}

vue-router 'hash' mode works, but I would like to use 'history' mode for cleaner URLs.

For reference: I've used this template

vue init vuetifyjs/webpack-simple

EDIT:

I've found the solution. The vuetifyjs/webpack-simple template had a misconfiguration from the start. Inside index.html I've changed:

<script src="./dist/build.js"></script>

to

<script src="/dist/build.js"></script>

And made sure that these options were present inside webpack.config.js:

devServer: {
    historyApiFallback: true
},

Answer 1

vue-router 'hash' mode works, but I would like to use 'history' mode for cleaner URLs

The point of the History API is to allow you to map DOM-generated and server-generated pages onto each other.

This means that if JavaScript fails for any reason , then the server can deliver the page instead. This means that if someone deep links to a page on your site, then the server can just deliver that page (as opposed to delivering the homepage, and then using JavaScript to mutate it into the desired page).

You need to write server-side code that will deliver the page.