由于相对路径错误，在 Apache 网络服务器上构建后部署 Vue 项目时出现问题

Question

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

Answer 1

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.