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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

For NPM   gt  npm run Build For Yarn   gt  yarn run build You also can check scripts in package json file

User · Answer

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

User · Answer

in your terminal  npm run build   and you host the dist folder  for more  see this video

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  gt   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

User · Answer

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

User · Answer

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

[vue.js] Which command do I use to generate the build of a Vue app?

Examples related to vue.js

Examples related to vuejs2

Examples related to vue-cli