Vue.2.0.5-生產環境部署

刪除警告

為了減少文件大小，Vue 精簡獨立版本已經刪除了所有警告，但是當你使用 Webpack 或 Browserify 等工具時，你需要一些額外的配置實現這點。

Webpack

使用 Webpack 的 DefinePlugin 來指定生產環境，以便在壓縮時可以讓 UglifyJS 自動刪除代碼塊內的警告語句。例如配置：

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

Browserify

• 運行打包命令，設置 NODE_ENV 為 "production"。等於告訴 vueify 避免引入熱重載和開發相關代碼。
• 使用一個全局 envify 轉換你的 bundle 文件。這可以精簡掉包含在 Vue 源碼中所有環境變量條件相關代碼塊內的警告語句。例如：

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

• 使用 vueify 中包含的 extract-css 插件，提取樣式到單獨的css文件。

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

跟蹤運行時錯誤

如果在組件渲染時出現運行錯誤，錯誤將會被傳遞至全局 Vue.config.errorHandler 配置函數（如果已設置）。利用這個鈎子函數和錯誤跟蹤服務（如 Sentry，它為 Vue 提供官方集成），可能是個不錯的主意。

提取 CSS

使用單文件組件時，<style> 標簽在開發運行過程中會被動態實時注入。在生產環境中，你可能需要從所有組件中提取樣式到單獨的 CSS 文件中。有關如何實現的詳細信息，請查閱 vue-loader 和 vueify 相應文檔。

vue-cli 已經配置好了官方的 webpack 模板。