生產環境部署

開啟生產環境模式

開發環境下，Vue 會提供很多警告來幫你對付常見的錯誤與陷阱。而在生產環境下，這些警告語句卻沒有用，反而會增加應用的體積。此外，有些警告檢查還有一些小的執行時開銷，這在生產環境模式下是可以避免的。

不使用構建工具

如果用 Vue 完整獨立版本，即直接用 <script> 元素引入 Vue 而不提前進行構建，請記得在生產環境下使用壓縮後的版本 (vue.min.js)。兩種版本都可以在安裝指導中找到。

使用構建工具

當使用 webpack 或 Browserify 類似的構建工具時，Vue 原始碼會根據 process.env.NODE_ENV

webpack

在 webpack 4+ 中，你可以使用 mode 選項：

module.exports = {
  mode: 'production'
}

但是在 webpack 3 及其更低版本中，你需要使用 

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

Browserify

• 在執行打包命令時將 NODE_ENV 設定為 "production"。這等於告訴 vueify
   避免引入熱過載和開發相關的程式碼。
• 對打包後的檔案進行一次全域性的 envify 轉換。這使得壓縮工具能清除掉 Vue 原始碼中所有用環境變數條件包裹起來的警告語句。例如：

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

• 或者在 Gulp 中使用 envify：

  // 使用 envify 的自定義模組來定製環境變數 var envify = require('envify/custom') browserify(browserifyOptions) .transform(vueify) .transform( // 必填項，以處理 node_modules 裡的檔案 { global: true }, envify({ NODE_ENV: 'production' }) ) .bundle()

• 或者配合 Grunt 和 grunt-browserify 使用 envify：

  // 使用 envify 自定義模組指定環境變數 var envify = require('envify/custom') browserify: { dist: { options: {        // 該函式用來調整 grunt-browserify 的預設指令        configure: b => b .transform('vueify') .transform(            // 用來處理 `node_modules` 檔案 { global: true }, envify({ NODE_ENV: 'production' }) ) .bundle() } } }

Rollup

使用 rollup-plugin-replace：

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)

模板預編譯

當使用 DOM 內模板或 JavaScript 內的字串模板時，模板會在執行時被編譯為渲染函式。通常情況下這個過程已經足夠快了，但對效能敏感的應用還是最好避免這種用法。

預編譯模板最簡單的方式就是使用單檔案元件——相關的構建設定會自動把預編譯處理好，所以構建好的程式碼已經包含了編譯出來的渲染函式而不是原始的模板字串。

如果你使用 webpack，並且喜歡分離 JavaScript 和模板檔案，你可以使用 vue-template-loader，它也可以在構建過程中把模板檔案轉換成為 JavaScript 渲染函式。

提取元件的 CSS

當使用單檔案元件時，元件內的 CSS 會以 <style> 標籤的方式通過 JavaScript 動態注入。這有一些小小的執行時開銷，如果你使用服務端渲染，這會導致一段“無樣式內容閃爍 (fouc)”。將所有元件的 CSS 提取到同一個檔案可以避免這個問題，也會讓 CSS 更好地進行壓縮和快取。

查閱這個構建工具各自的文件來了解更多：

• webpack + vue-loader (vue-cli 的 webpack 模板已經預先配置好)
• Browserify + vueify
• Rollup + rollup-plugin-vue

跟蹤執行時錯誤

如果在元件渲染時出現執行錯誤，錯誤將會被傳遞至全域性 Vue.config.errorHandler配置函式 (如果已設定)。利用這個鉤子函式來配合錯誤跟蹤服務是個不錯的主意。比如 Sentry，它為 Vue 提供了官方整合。

from: https://cn.vuejs.org/v2/guide/deployment.html