Deploy Vue.js app to an Apache server 2020 (shared Linux hosting) - Code with bro

Hi guys, today, i'll be sharing with you guys how to actually deploy/host your vue app on an apache server. I had a similar issue and notices there aren't enough resource out there on how to do it so, I decided to share with you guys how I succeeded in doing that. Hope that helps!

Note: Please note that some functionalities or part of your code might not work properly when you use a local server. like fetching from an external API etc. but when you actually host it on an actual server online. it all works 100%

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
@codewithbro

- - - - - - - - - - - - - - - - - - - - - -

Follow us on social networks:

#vuejs #webdevelopment #programming #softwaredeveloper #softwareengineer #webdeveloper #developer #iosdeveloper #mobiledevelopment #coding #coder #javascript #developer #computerscience #computersciencestudent #100daysofcode #html #css #programmer #vue #npmpackage #npm #package #CodeNewbies #Code_with_bro #code_withbro

[LucaPizzinato]

Bro.. you are my hero!! You saved my sanity

[miguelangelvillafuerte]

brother, you solve a question that have since lot time ago... THANKS SO MUCH ! Respect for you !

[evanhauk]

Thank you, just needed the dot in front of path!!

[roderickaguilar]

Yo sé que no hablas espanol. Yo tampoco entiendo nada de lo que hablas, pero diste con la solución, gracias. Saludos de Venezuela

[cagn]

thank u so so so so so so thank you from the bottom of my

[rx]

thank you bro i faced this problem today and i solved it with your advice

[brunosthoughts]

thak youuuu now I am able to post my projects on github pages :)

[nikoing]

Thank you so much, I was limited on that point, it was difficult to use Vue CLI becaise of deploying problem.
Thanks alot

[lyv]

When i use svelte had has a problem like this. Why haven't dot?

[ibrahimyakut]

Create a file named vue.config.js in the home directory where the package.json file is located and paste the following code into it.
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? './'
: '/'
}

now npm run build to deploy again

[ahmedosama]

bro when I open my project it opens a blank page with navbar sit on the top. it does not open homePage directly like in node server, so I should open it from the navbar. please help to make it open homePage directly or / page

[rnscapenab]

hello, i have vuejs and vite so i dont have vue.config.js, i have vite.config.js. I followed your steps but i stil get blank (whites screen) on my app. any thoughts?

[claudiocabrera]

dias y dias buscando la solucion, saludos desde Argentina!!

[diems]

add this in your vue.config.js :

module.exports = defineConfig({
publicPath: './'
})

then run: npm run build and the index.html paths are relatives to index.html automaticaly

[donybustamante]

muchas gracias . toda la tarde tratando de resolverlo

[codewithbro]

We recently wrote a script which helps do the job with no stress.
Note: This script is most helpful when you want to be productive.

[juancarlosaliaga]

Gracias este tutorial pude resolver la publicación de mi sitio en un servidor Debian 10. Thanks very much.

[salmanmansoor]

really helped me out. thankyou. you eaned yourself a sub. just one thing. rest of my App works perfectly on apache server however images are still not loading and giving 404 error. please help me out

[bedrock_the_ninth]

Running jus "npm run serve" in the root directory would have been enough :/