How to solve vue.js prod build assets relative path problem
Hello,
After I got my installation issues rectified I created a new vuejs project using the vue 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 UI and its a very beautiful UI to manage your projects.
I was having vue/cli 3.5.3 and node.js v8.15
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 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. I copied the dist folder to one of my wamp apache server’s www folder. I browsed the project from the browser and I found oops, the site doesn’t show anything. I looked into the browser console and saw that none of the CSS and JS files loaded because of the reference 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.
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. I then did a prod build and it also was successful. I then moved the dist folder to my apache www path and I 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.
You can buy me a coffee , if you like at https://www.buymeacoffee.com/vipinc007
