Building Vue.js Applications for Production

Published on April 29, 2017 by

In this short post, I want to show you how to build the project for production. This involves hiding any development messages and warnings, and also minifying JavaScript. To make a build, simply run the below command, which is defined within the package.json file.

npm run build

When doing so, a production build of your project is placed within a new dist directory in a file named build.js. What you will want to do, is to simply copy that file along with the index.html file to a web server, and you should be good to go.

The build.js file contains all of the JavaScript needed for running the application. This means that all of the files referenced from the entrypoint and from there recursively, are included in the webpack bundle. This includes any libraries that you may have imported as well. In a more complex setup, you would probably have more webpack bundles, i.e. app.bundle.js and vendor.bundle.js or similar, but in our simple application, we only have a single webpack bundle.

And that’s how easy it is to make a production build of a Vue.js application.


Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

Leave a Reply

Your e-mail address will not be published.