Vue.js 2.0 生產(chǎn)環(huán)境部署

刪除警告

為了減少文件大小，Vue 精簡獨(dú)立版本已經(jīng)刪除了所有警告，但是當(dāng)你使用 Webpack 或 Browserify 等工具時(shí)，你需要一些額外的配置實(shí)現(xiàn)這點(diǎn)。

Webpack

使用 Webpack 的 DefinePlugin 來指定生產(chǎn)環(huán)境，以便在壓縮時(shí)可以讓 UglifyJS 自動(dòng)刪除代碼塊內(nèi)的警告語句。例如配置：

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

Browserify

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

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

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

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

跟蹤運(yùn)行時(shí)錯(cuò)誤

如果在組件渲染時(shí)出現(xiàn)運(yùn)行錯(cuò)誤，錯(cuò)誤將會(huì)被傳遞至全局 Vue.config.errorHandler 配置函數(shù)（如果已設(shè)置）。利用這個(gè)鉤子函數(shù)和錯(cuò)誤跟蹤服務(wù)（如 Sentry，它為 Vue 提供官方集成），可能是個(gè)不錯(cuò)的主意。

提取 CSS

使用單文件組件時(shí)，<style> 標(biāo)簽在開發(fā)運(yùn)行過程中會(huì)被動(dòng)態(tài)實(shí)時(shí)注入。在生產(chǎn)環(huán)境中，你可能需要從所有組件中提取樣式到單獨(dú)的 CSS 文件中。有關(guān)如何實(shí)現(xiàn)的詳細(xì)信息，請(qǐng)查閱 vue-loader 和  vueify 相應(yīng)文檔。

vue-cli 已經(jīng)配置好了官方的 webpack 模板。