# 生产环境部署

INFO

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

# 开启生产环境模式

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

# 不使用构建工具

如果你正在使用完整的构建，即直接通过脚本标签引入 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 转换应用到你的包中。这使得压缩工具可以删除包裹在环境变量条件块中的Vue源代码中的所有警告。例如:
```
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
```
1

或者，利用 Gulp 使用 envify：

// 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 使用 envify：

// 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:

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，它还可以在构建步骤中将模板文件转换为 JavaScript 渲染函数。

# 提取组件CSS

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

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

Webpack + vue-loader (vue-cli webpack 模板已经预先配置了这个)
Browserify + vueify
Rollup + rollup-plugin-vue

# 跟踪运行时错误

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

← 移动端路由 →