- Shop NEW!
- The Vue Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
- Reactivity in Depth
- Transition Effects
- Transitioning State
- Render Functions
- Custom Directives
- Single File Components
- Production Deployment Tips
- State Management
- Unit Testing
- Server-Side Rendering
- TypeScript Support
- Migration from Vue 1.x
- Migration from Vue Router 0.7.x
- Migration from Vuex 0.6.x to 1.0
- Comparison with Other Frameworks
- Join the Vue.js Community!
Production Deployment Tips
During development, Vue provides a lot of warnings to help you with common errors and pitfalls. However, these warning strings become useless in production and bloat your app’s payload size. In addition, some of these warning checks have small runtime costs that can be avoided in production mode.
If you are using the standalone build, i.e. directly including Vue via a script tag without a build tool, make sure to use the minified version (
vue.min.js) for production. Both versions can be found in the Installation guide.
When using a build tool like Webpack or Browserify, the production mode will be determined by
process.env.NODE_ENV inside Vue’s source code, and it will be in development mode by default. Both build tools provide ways to overwrite this variable to enable Vue’s production mode, and warnings will be stripped by minifiers during the build. All
vue-cli templates have these pre-configured for you, but it would be beneficial to know how it is done:
Use Webpack’s DefinePlugin to indicate a production environment, so that warning blocks can be automatically dropped by UglifyJS during minification. Example config:
Run your bundling command with the actual
NODE_ENVenvironment variable set to
"production". This tells
vueifyto avoid including hot-reload and development related code.
Apply a global envify transform to your bundle. This allows the minifier to strip out all the warnings in Vue’s source code wrapped in env variable conditional blocks. For example:NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
The easiest way to pre-compile templates is using Single-File Components - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.
When using Single-File Components, the CSS inside components are injected dynamically as
Refer to the respective build tool documentations to see how it’s done:
- Webpack + vue-loader (the
vue-cliwebpack template has this pre-configured)
- Browserify + vueify
- Rollup + rollup-plugin-vue
If a runtime error occurs during a component’s render, it will be passed to the global
Vue.config.errorHandler config function if it has been set. It might be a good idea to leverage this hook together with an error-tracking service like Sentry, which provides an official integration for Vue.