# 生产环境部署

INFO

如果你使用 Vue CLI(opens new window) ,下面的大多数提示都是默认启用的。此部分仅当你使用自定义构建设置时才相关。

# 开启生产环境模式

在开发期间,Vue 提供了许多警告,以帮助你处理常见的错误和隐患。但是,这些警告字符串在生产环境中会变得无意义,并且会增大应用程序的负担。此外,有些警告检查的运行时成本很小,可以在生产环境模式(opens new window) 中避免。

# 不使用构建工具

如果你正在使用完整的构建,即直接通过脚本标签引入 Vue,而不使用构建工具,那么请确保在生产环境中使用压缩版。这可以在安装指南中找到。

# 使用构建工具

当使用 Webpack 或 Browserify 这样的构建工具时,生产环境模式将由 Vue 的源代码中的 process.env.NODE_ENV 决定,默认为开发模式。这两种构建工具都提供了重写这个变量以启用 Vue 的生产模式的方法,并且在构建过程中警告将被压缩工具删除。Vue CLI 已经为你预先配置了这个,不过了解它的工作原理会更好:

# Webpack

在 Webpack 4+,你可以使用 mode 选项:

module.exports = {
  mode: 'production'
}
1
2
3

# Browserify

  • 将当前的环境变量 NODE_ENV 设置为 "production" 作为运行的打包命令。它告诉 vueify 避免引入热重载和开发相关的代码。

  • 将一个全局的 envify(opens new window) 转换应用到你的包中。这使得压缩工具可以删除包裹在环境变量条件块中的Vue源代码中的所有警告。例如:

    NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
    
    1
  • 或者,利用 Gulp 使用 envify(opens new window)

    // Use the envify custom module to specify environment variables
    const envify = require('envify/custom')
    
    browserify(browserifyOptions)
      .transform(vueify)
      .transform(
        // Required in order to process node_modules files
        { global: true },
        envify({ NODE_ENV: 'production' })
      )
      .bundle()
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
  • 或者,利用 Grunt 和 grunt-browserify(opens new window) 使用 envify(opens new window)

    // Use the envify custom module to specify environment variables
    const envify = require('envify/custom')
    
    browserify: {
      dist: {
        options: {
          // Function to deviate from grunt-browserify's default order
          configure: (b) =>
            b
              .transform('vueify')
              .transform(
                // Required in order to process node_modules files
                { global: true },
                envify({ NODE_ENV: 'production' })
              )
              .bundle()
        }
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

# Rollup

使用 @rollup/plugin-replace(opens new window) :

const replace = require('@rollup/plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)
1
2
3
4
5
6
7
8
9
10

# 预编译模板

当使用 DOM 内模板或 JavaScript 内模板字符串时,将动态地执行从模板到渲染函数的编译。在大多数情况下,这已经足够快了,但是如果应用程序对性能敏感,最好避免这样做。

预编译模板最简单的方法是使用单文件组件——相关的构建设置自动为你执行预编译,所以构建代码包含已经编译的渲染函数,而不是原始的模板字符串。

如果你正在使用 Webpack,并且更喜欢将 JavaScript 和模板文件分开,你可以使用 vue-template-loader(opens new window) ,它还可以在构建步骤中将模板文件转换为 JavaScript 渲染函数。

# 提取组件CSS

当使用单文件组件时,组件内部的 CSS 会通过 JavaScript 以 <style> 标签的形式被动态注入。这有一个小的运行时成本,如果你使用服务器端渲染,它将导致“无样式内容的闪现” 。将所有组件的 CSS 提取到同一个文件中可以避免这些问题,还可以更好地压缩和缓存 CSS。

参考各自的构建工具文档,看看它是如何做的:

# 跟踪运行时错误

如果在组件渲染期间发生运行时错误,它将被传递到全局的 app.config.errorHandler 配置函数,如果它已经被设置。将这个钩子与错误跟踪服务如 Sentry(opens new window) 一起使用可能是一个好主意,它为 Vue 提供了一个官方集成(opens new window)