Which command do I use to generate the build of a Vue app?

Question

What should I do after developing a Vue app with vue-cli?

In Angular there was some command that bundle all the scripts into one single script.

Is there something the same in Vue?

Solution 1

I think you've created your project like this:

vue init webpack myproject

Well, now you can run

npm run build

Copy index.html and /dist/ folder into your website root directory. Done.

Solution 2

If you've created your project using:

vue init webpack myproject

You'd need to set your NODE_ENV to production and run, because the project has web pack configured for both development and production:

NODE_ENV=production npm run build

Copy dist/ directory into your website root directory.

If you're deploying with Docker, you'd need an express server, serving the dist/ directory.

Dockerfile

FROM node:carbon

RUN mkdir -p /usr/src/app

WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install

ENV NODE_ENV=production

RUN npm run build

# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build

# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]

Solution 3

in your terminal

npm run build

and you host the dist folder. for more see this video

Solution 4

If you run into problems with your path, maybe you need to change the assetPublicPath in your config/index.js file to your sub-directory:

http://vuejs-templates.github.io/webpack/backend.html

Solution 5

To deploy your application to prod environment add

"build": "vue-cli-service build --mode prod"

in your scripts in package.json file.

Open your main.js and add

Vue.config.productionTip = false;

right after your imports. Then open your cli in the project folder and run this command

npm run build

This will make a dist folder in your project directory you may upload that dist folder in your host and your website will be live

View more solutions

Comments

[Swimburger]

It should be part of the cli, here's the deployment doc page vuejs.org/v2/guide/deployment.html Depending on what version you have, what template you use, it will probably differ a little. But you should specify that you are doing a production build like in the docs.

[artem0071]

I use 2.2.1 vue. I see the documentation, but there no information about deployment. I'm not using nodejs on hoster. So when I start it in localhost it works, but when i download all files to hoster, there are nothing on the page

[Swimburger]

When you do a build, it will probably compile all the files (html, css, js) to a /dist folder. This dist folder should be the root of your app on your hosting. (I haven't use Vue2 yet, but I bet it will be there)

[seenickcode]

Hey guys I had this same prob last week and wrote smth up if it helps anyone: medium.com/@seenickcode/…

[Fayaz]

I have uploaded the files from dist folder to cpanel, but it is showing only blank

[nu everest]

Is there no need to run npm start or anything like this?

[Egor Stambakio]

@nueverest if you've just created your project with vue init webpack myproject you will see further instructions in your console: cd myproject, npm install. After npm install all packages are downloaded and vue is able to compile with either npm run dev for development server + hot reload, or with npm run build to create a deployable bundle.

[Andy Hayden]

This doesn't seem to work with vue router... Am I doing something wrong?

[Egor Stambakio]

@AndyHayden this works fine if your server returns index.html for all requests, including 404 (as it should). If this doesn't help please clarify what "doesn't work" means in your case.

[Egor Stambakio]

@AndyHayden an AWS S3 check if 1) index & error document === index.html; 2) policies are set for static website; 3) your build.js is inside dist folder on s3, and index.html is in the root.

[Simon Schnell]

@AndyHayden if it will not work you can write a .htaccess file and define the following line ErrorDocument 404 /index.html then even vue-router will work

[David 天宇 Wong]

the answer should be "the content of the dist folder is all you need. You do not need to copy /index.html but only the index.html in the dist folder is needed. In addition, prior to running npm run build you should configure your production path in config/index.js".

[Hakim]

do you expose that container to the outside or you use nginx or apache as a proxy?

[Akinjide]

Yeah, you’d use Apache or Nginx as proxy, port 80

[crash springfield]

This incorrectly assumes a build script exists in package.json.

[orad]

Does it matter to have NODE_ENV=production when running nom run build? or will it build differently without production env var?

[Shane G]

Make sure to change build: { ..... assetsPublicPath: './', that dots before the forward slash is important. But there is an assetsPublinPath in the dev object in that file also, so be sure to change the correct one.

[JR Utily]

you are right, but as the accepted answer show, the question was about which command to run after

[J.Ko]

@EgorStambakio can you update your answer so people using vue CLI 3 know what to do?

[Dan Fletcher]

@crashspringfield An accurate assumption to make when the OP is asking specifically about a Vue application created with vue-cli

[LOG_TAG]

paste.ubuntu.com/p/dryhSwnYh5 WORKDIR /usr/src/app can be WORKDIR /app ? also CMD [ "http-server", "dist" ] needed for serving via http server ? instead of CMD [ "npm", "start" ]

[Hamendra Sunthwal]

Version: webpack 3.12.0 Time: 16548ms Asset Size Chunks Chunk Names build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emitted] main – This comes up after running the above cmd into project folder – can you please guide me through the next step to get in to live ? –

[Hamendra Sunthwal]

Version: webpack 3.12.0 Time: 16548ms Asset Size Chunks Chunk Names build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emitted] main – This comes up after running the above cmd into project folder – can you please guide me through the next step to get in to live ? –

[Hamendra Sunthwal]

Version: webpack 3.12.0 Time: 16548ms Asset Size Chunks Chunk Names build.js 2.15 MB 0 [emitted] [big] main build.js.map 9.74 MB 0 [emitted] main – This comes up after running the above cmd into project folder – can you please guide me through the next step to get in to live ? –

[Hamendra Sunthwal]

just upload dist folder to your ftp and done ? & how to access then Vue app on server ?

[Tyler Morales]

Doing this creates a dist folder containing bundled JS/ CSS and HTML for easy deployment in any hosting service