How to deploy 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, and then these files are sent to host.

Is there something the same in Vue?

Answer 1

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

Answer 2

in your terminal

npm run build

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

Answer 3

1. npm run build - this will uglify and minify the codes

2. save index.html and dist folder in root directory of your website.

3. free hosting service that you might be interested in -- Firebase hosting.

Answer 4

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.

Answer 5

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

Answer 6

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.