I am in the process of setting up a Vue app with Vuetify and Vue Router. Everything works fine when I load the base URL "/", and I can easily navigate to /manage/products. However, if I try to directly access /manage/products by typing it into the address bar, I encounter an error:
Failed to load resource: the server responded with a status of 404 (Not Found)
It appears that the app is trying to load /manage/dist/build.js instead of just /dist/build.js. Is there a way to adjust my webpack.config.js to ensure the correct build.js file 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')
}
}
Currently, the vue-router 'hash' mode works but I prefer to use the 'history' mode for cleaner URLs.
Just for your information, I started this project using the following template:
vue init vuetifyjs/webpack-simple
EDIT:
I have figured out the solution. The vuetifyjs/webpack-simple template had a misconfiguration from the beginning. In the index.html file, I made the following change:
<script src="./dist/build.js"></script>
to
<script src="/dist/build.js"></script>
Additionally, I ensured that these options were included in the webpack.config.js file:
devServer: {
historyApiFallback: true
},