How to deploy Vue app?

问题:

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?

回答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.

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

回答3:

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

回答4:

in your terminal

npm run build

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

回答5:

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.

回答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.

回答7:

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.

回答8:

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

回答9:

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.