Vue .js 2.0 production environment deployment

Vue .js 2.0 production environment deployment

Remove the warning

To reduce file size, the Vue Thin Stand-alone version has removed all warnings, but when you use tools such as Webpack or Browserify, you'll need some additional configuration to do this.

Webpack

Use Webpack's DefinePlugin to specify the production environment so that UglifyJS can automatically remove warning statements from blocks of code when compressed. For example, configuration:

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

Browserify

• Run the package command and set NODE_ENV to "production." Is to tell vueify to avoid introducing thermal overloading and developing relevant code.
• Use a global envify to convert your bundle files. T his streamlines the warning statements contained in all environment variable condition-related blocks of code in the Vue source code. For example:

  NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

• Use the extract-css plug-in contained in vueify to extract styles into separate css files.

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

Track run-time errors

If a run error occurs while the component is rendering, the error is passed to the global Vue.config.errorHandler configuration function, if set. It might be a good idea to take advantage of this hook function and error tracking services, such as Sentry, which provide official integration for Vue.

Extract CSS

When using single-file components, labels are dynamically injected in real time during development runs. I n a production environment, you may need to extract styles from all components into separate CSS files. For more information on how to do this, check out the vue-loader and vueify documentation.

The vue-cli has been configured with the official webpack template.