Building Vue.js Applications for Production

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.