I have a simple Vue.js project. I ran the command yarn build, then copied all the files inside dist/ folder onto Apache webserver.
When my URL pointed to the generated index.html, nothing appeared. I discovered this was due index.html pointing to the wrong relative paths that contain the js and CSS files.
For example, I noticed this wrong relative inside index.html
<script type=module src=/js/app.4dcb0a0b.js></script>
The correct one should be
<script type=module src=./js/app.4dcb0a0b.js></script>
It should be ./js and not /js.
After I corrected the relative paths, index.html appear correctly.
It is tedious if I have to manually change the wrong relative paths every time. How can I have a better solution?
I am using @vue/cli 5.0.1, yarn v1.22.17
I will answer my own question.
Credit for the answer goes to this article
https://medium.com/js-dojo/how-to-solve-vue-js-prod-build-assets-relative-path-problem-71f91138dd79
Solution is to add the following line to vue.config.js;
module.exports = {publicPath: ''};
I do not know why this solution works. If someone knows, please drop some comments. Thank you.