Production 으로 디플로이 하기

Warning 메시지 없애기

The minified standalone build of Vue has already stripped out all the warnings for you for a smaller file size, but when you are using tools like Webpack or Browserify, you will need some additional configuration to achieve this.


Use Webpack’s DefinePlugin to indicate a production environment, so that warning blocks can be automatically dropped by UglifyJS during minification. Example config:

var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false


NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o build.css ] -e main.js | uglifyjs -c -m > build.js

Runtime 에러 조회하기

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.

CSS를 따로 분리하기

When using Single-File Components, the <style> tags are injected dynamically at runtime during development. In production you may want to extract the styles across all components into a single CSS file. For details on how to achieve this, consult the respective documentation for vue-loader and vueify.

The official webpack template from vue-cli has this already configured out of the box.