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?

It should be part of the cli, here's the deployment doc page https://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. — Swimburger, Mar 21 '17 at 19:47
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 — artem0071, Mar 21 '17 at 20:02
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) — Swimburger, Mar 21 '17 at 20:05
Hey guys I had this same prob last week and wrote smth up if it helps anyone: https://medium.com/@seenickcode/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489 — seenickcode, Sep 04 '17 at 07:03
I have uploaded the files from dist folder to cpanel, but it is showing only blank — Fayaz, Aug 04 '19 at 07:35

Egor Stambakio · Accepted Answer · 2017-06-04T08:15:10.860

197

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.

edited Jun 04 '17 at 08:15

answered Mar 22 '17 at 07:08

Egor Stambakio

17,836
5
33
35

1

Is there no need to run `npm start` or anything like this? – nu everest Apr 21 '17 at 13:42
@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. – Egor Stambakio Apr 21 '17 at 13:56
This doesn't seem to work with vue router... Am I doing something wrong? – Andy Hayden Jul 10 '17 at 01:20
@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 Jul 10 '17 at 06:40
1

@AndyHayden an AWS S3 check if 1) index & error document === index.html; 2) policies are set [for static website](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteAccessPermissionsReqd.html); 3) your `build.js` is inside `dist` folder on s3, and `index.html` is in the root. – Egor Stambakio Jul 10 '17 at 16:39
@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 – Simon Schnell Oct 22 '17 at 20:49
9

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`". – David 天宇 Wong Oct 26 '17 at 08:29
Does it matter to have `NODE_ENV=production` when running `nom run build?` or will it build differently without production env var? – orad May 22 '18 at 00:39
@EgorStambakio can you update your answer so people using vue CLI 3 know what to do? – J.Ko Nov 02 '18 at 23:46
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 ? – – Jun 08 '20 at 12:22

score 29 · Answer 2 · answered Nov 29 '17 at 14:19

29

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" ]

answered Nov 29 '17 at 14:19

Akinjide

2,723
22
28

do you expose that container to the outside or you use nginx or apache as a proxy? – Hakim Mar 07 '18 at 22:58
Yeah, you’d use Apache or Nginx as proxy, port 80 – Akinjide Mar 08 '18 at 08:13
https://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" ] – LOG_TAG Jul 26 '19 at 10:52
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 ? – – Jun 08 '20 at 12:22

score 10 · Answer 3 · answered Nov 29 '17 at 14:08

10

in your terminal

npm run build

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

answered Nov 29 '17 at 14:08

anasmorahhib

807
9
14

This incorrectly assumes a build script exists in package.json. – crash springfield Mar 22 '18 at 15:38
6

@crashspringfield An accurate assumption to make when the OP is asking specifically about a Vue application created with `vue-cli` – Dan Fletcher Mar 05 '19 at 04:33

score 7 · Answer 4 · answered Feb 07 '20 at 06:21

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

score 5 · Answer 5 · edited Oct 14 '17 at 12:44

5

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

edited Oct 14 '17 at 12:44

Simon Forsberg

13,086
10
64
108

answered Aug 15 '17 at 15:18

jntme

602
1
5
18

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. – Shane G Sep 11 '18 at 19:06
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 ? – – Jun 08 '20 at 12:23

score 3 · Answer 6 · answered Jul 12 '20 at 14:42

The vue documentation provides a lot of information on this on how you can deploy to different host providers.

npm run build

You can find this from the package json file. scripts section. It provides scripts for testing and development and building for production.

You can use services such as netlify which will bundle your project by linking up your github repo of the project from their site. It also provides information on how to deploy on other sites such as heroku.

You can find more details on this here

Doing this creates a dist folder containing bundled JS/ CSS and HTML for easy deployment in any hosting service — Tyler Morales, Aug 06 '20 at 18:25

score 2 · Answer 7 · answered May 30 '19 at 13:48

The commands for what specific codes to run are listed inside your package.json file under scripts. Here is an example of mine:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

If you are looking to run your site locally, you can test it with

npm serve

If you are looking to prep your site for production, you would use

npm build

This command will generate a dist folder that has a compressed version of your site.

score 2 · Answer 8 · answered Jul 21 '19 at 12:43

THIS IS FOR DEPLOYING TO A CUSTOM FOLDER (if you wanted your app not in root, e.g. URL/myApp/) - I looked for a longtime to find this answer...hope it helps someone.

Get the VUE CLI at https://cli.vuejs.org/guide/ and use the UI build to make it easy. Then in configuration you can change the public path to /whatever/ and link to it URL/whatever.

Check out this video which explains how to create a vue app using CLI if u need more help: https://www.youtube.com/watch?v=Wy9q22isx3U

score 2 · Answer 9 · answered Nov 26 '20 at 12:44

2

For NPM => npm run Build For Yarn => yarn run build

You also can check scripts in package.json file

answered Nov 26 '20 at 12:44

Zaheer Alvi

131
1
5

score 2 · Answer 10 · answered Jun 18 '21 at 11:22

2

You write down the below command being at the project root.

npm run build

answered Jun 18 '21 at 11:22

Saurav gupta

387
3
9

score 1 · Answer 11 · answered Jul 24 '20 at 08:02

First Install Vue Cli Globally

npm install -g @vue/cli

To create a new project, run:

vue create project-name

run vue

npm run serve

Vue CLI >= 3 uses the same vue binary, so it overwrites Vue CLI 2 (vue-cli). If you still need the legacy vue init functionality, you can install a global bridge:

Vue Init Globally

npm install -g @vue/cli-init

vue init now works exactly the same as vue-cli@2.x

Vue Create App

vue init webpack my-project

Run developer server

npm run dev

score 0 · Answer 12 · answered Apr 16 '18 at 09:25

0

This command is for start the development server :

npm run dev

Where this command is for the production build :

npm run build

Make sure to look and go inside the generated folder called 'dist'.
Then start push all those files to your server.

answered Apr 16 '18 at 09:25

Farcrew Rz

19
2

score 0 · Answer 13 · answered Jul 14 '18 at 04:22

One way to do this without using VUE-CLI is to bundle the all script files into one fat js file and then reference that big fat javascript file into main template file.

I prefer to use webpack as a bundler and create a webpack.conig.js in the root directory of project. All the configs such as entry point, output file, loaders, etc.. are all stored in that config file. After that, I add a script in package.json file that uses webpack.config.js file for webpack configs and start watching files and create a Js bundled file into mentioned location in webpack.config.js file.

score 0 · Answer 14 · answered Sep 17 '18 at 11:47

I think you can use vue-cli

If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is making sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction of your backend framework.

If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the built content in the dist directory to any static file server, but make sure to set the correct baseUrl

you are right, but as the accepted answer show, the question was about which command to run after — JR Utily, Sep 17 '18 at 12:10

score 0 · Answer 15 · answered Oct 23 '18 at 18:20

0

npm run build - this will uglify and minify the codes
save index.html and dist folder in root directory of your website.
free hosting service that you might be interested in -- Firebase hosting.

answered Oct 23 '18 at 18:20

score 0 · Answer 16 · answered Nov 01 '18 at 03:43

0

if you used vue-cli and webpack when you created your project.

you can use just

npm run build command in command line, and it will create dist folder in your project. Just upload content of this folder to your ftp and done.

answered Nov 01 '18 at 03:43

user3348410

2,733
10
51
85

just upload dist folder to your ftp and done ? & how to access then Vue app on server ? – Jun 10 '20 at 06:05

score 0 · Answer 17 · answered Feb 28 '22 at 07:11

0

If you are using npm u can use npm run build but if you are using yarn you can simply run yarn build

answered Feb 28 '22 at 07:11

Kaddu Livingstone

796
9
17

score 0 · Answer 18 · edited Aug 06 '22 at 12:47

If you want to create a build for a domain, you can use the $ npm run build command.

If you're going to build for a sub-domain, follow these instructions:

Create a file that's name is vue.config.js in the root
Write down the below code in the vue.config.js file:

module.export = {
  publicPath: '/demo-project',
}

Now run $ npm run build

Note: Use your subdomain name instead of "/demo-project".

score -1 · Answer 19 · answered May 24 '19 at 12:34

-1

If you want to build and send to your remote server you can use cli-service (https://cli.vuejs.org/guide/cli-service.html) you can create tasks to serve, build and one to deploy with some specific plugins as vue-cli-plugin-s3-deploy

answered May 24 '19 at 12:34

doijunior

126
1
8

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

19 Answers19

vue init now works exactly the same as vue-cli@2.x

Linked

Related