生產環境部署


以下大多數內容在你使用 Vue CLI 時都是預設為開啟的。該章節僅跟你自訂的建置設定有關。


目錄


#開啟生產環境模式

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


不使用建置工具

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


使用建置工具

#當使用webpack 或Browserify 類似的建置工具時，Vue 原始碼會根據process.env.NODE_ENV 決定是否啟用生產環境模式，預設為開發環境模式。在 webpack 與 Browserify 中都有方法來覆寫此變量，以啟用 Vue 的生產環境模式，同時在建置過程中警告語句也會被壓縮工具移除。所有這些在 vue-cli 模板中都預先配置好了，但了解一下怎樣配置會更好。

webpack

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

module.exports = {
  mode: 'production'
}

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

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 提供了官方整合。


#