IMG-LOGO

How to publish or deploy Vue.js app?

andy - 23 Feb, 2018 18688 Views 16 Comment

Once you have completed the development phase of your Vue.js app, you want to start deploying or publishing your Vue.js app. To deploy it is pretty simple, what you have to do is to deploy using the Node.js command prompt. Note: this only applies if you are using the CLI mode without using the Vue.js script tag directly.

To start deploying you can run the following command.

npm run build

This is a sample performing a deployment for Vue.js app. If you see the screenshot below is based on the first example in Vue.js my-project tutorial.

How does the deployment work? If you see in your project folder, you will notice there is a folder called build. Inside the build folder, there is a build.js file where all the command and build requirement are specified in this setting file. In this example, I used the default webpack specified in the Vue.js default CLI project.

Where are the published Vue.js files?

Once the publish process has completed, you can find all the files under the dist folder. Just copy the files inside the dist folder and deploy it on your server.

Comments

sdk
02 Jul, 2018
Hello, thank you for the tutorial. But please, I copied the dist folder to myself, but it doesn't seem to work. My app only shows blank, even though I can see all static assets are correctly loaded into the page
andy
03 Jul, 2018
Hi there, Did you get any error on your javascript? When you view this on chrome for example: go to web console and see if there is any javascript error.
Sdk
03 Jul, 2018
There was no error at all in the console. Everything is just blank
andy
04 Jul, 2018
Do you have the URL for the project? If this is a private project, you can send me the URL details to my email at bytutorial.com[at]gmail.com. I have been published couple of the apps online and did not find any issue. It can be related to hosting as well. What sort of back-end programming (ex: PHP or .Net) the does app relate to? Btw, thanks for the feedback regarding with the URL. I have included in the comment email, so you don't have to search for it again on the site.
Sdk
07 Jul, 2018
I have been able to identify the problem partly. I noticed that the problem only occurs when I use vue-router.
Praveen
27 Mar, 2020
Hey Andy, I too got same issue, could you please help me?
Schneider Adrian Andrei
28 Aug, 2018
Hello, i have a webRTC multi-user-video-chat-app on my localhost is working, but i want to deploy the app on my server,my-name.com/chat but i receive a blank page, how can i solve this issue
andy
29 Aug, 2018
Hi Schneider, Possible to give me the url of the site? Is it hosted on windows IIS? You can send the details to bytutorial.com[@]gmail.com if you want.
Anonymous
10 Jan, 2019
Hi, I have develop my own project and learning how to deploy it into server. All the steps I followed is not big issue, and I noticed that are slightly different after I enter command 'npm run build'. The dist folder contains not only static and the index.html files but even more. Then, after I pushed all the files from the dist directory to the github, it always shows 404 page not found when I key in my project name. Any clue on this?
andy
10 Jan, 2019
Would you be able to share the URL?
bepe
21 Jan, 2019
i have project vuejs + webpack, after build project, i was copying dist folder to my root server then just shows blank page. What can i do?.
andy
25 Jan, 2019
Do you know what browser you use? Can you view any error in console development log?
Bachtiar Panjaitan
20 Feb, 2019
any browser, chrome, mozilla, mozilla developer edition and i not got error on my console.
Nagarjuna Reddy
13 May, 2019
Content is easy to understand, it helped thank you.
slimgera00
15 Jan, 2020
Hi, i know this is late but.. the dist folder has to be served via a http server, however, if you're testing it offline you need to run "npm install -g serve" then "serve -g dist" where dist is the built project. Refer to https://cli.vuejs.org/guide/deployment.html#general-guidelines
andy
18 Jan, 2020
Thanks for the feedback. Hopefully it can help everyone who visitied this article.
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles