Vue.js | How to solve vue.js prod build assets relative path problem
After I got my installation issues rectified I created a new vue.js project using the vue.js UI which I fixed in one of my earlier posts. The vue UI was brilliant enough to get my first project created in no matter of time. I was excited about vue.js UI and its a very beautiful UI to manage your projects.
I was having vue/cli 3.5.3 and node.js v8.15
First Approach
I installed the Visual Studio Code and opened the project and looked into the folders and files. I compiled the project using the vue UI and I opened the project in a browser and all looked good when I saw the default vue.js template on the screen with home and about pages. All worked good.
I then wanted to see if it gives me a good production build. So I did a build from the vue UI and build as successful. I saw the dist folder created with the required files in it. After that I copied the dist folder to one of my wamp apache server’s www folder. Then I browsed the project from the browser and I found oops, the site doesn’t show anything. when I looked into the browser console and saw that none of the CSS and JS files loaded because of the reference problem.
The Problem
below is my dist folder structure
I opened the index.html file it had a wrong path or it was not a relative path. Like below
<script src=/js/chunk-vendors.e4c467f6.js></script>
If you notice the src path starts with “/” and that was not right. It should start without “/” and should be like below
<script src=js/chunk-vendors.e4c467f6.js></script>
This is where vuejs is spoiling there impression. This was the code and output of their own sample project and it should have worked without any problem.
The Solution
I then googled for hours and nobody has a clear solution. Most of them talked about settings this and that path and none of them worked. In one of the posts, it talked about setting something in the vue.config.js file. I searched for this file in the src folder and could not find it. As per vuejs documentation, this file is optional. I started hatting this framework.
I thought of adding this file manually and I added it and I inserted the below code in that file
module.exports = {publicPath: ''};
Like the below image
I compiled the code again and everything worked. Then I did a prod build and it also was successful. After that I moved the dist folder to my apache www path and browsed the project with my fingers crossed and wow to my surprise it worked without any console errors and I could see the default page loaded and all links working.
Let this be helpful to everybody who is facing this issue.
The same article is available at my medium blot at
https://medium.com/js-dojo/how-to-solve-vue-js-prod-build-assets-relative-path-problem-71f91138dd79
You can buy me a coffee , if you like at https://www.buymeacoffee.com/vipinc007