19. Production Deployment（生产部署）

生产部署

打开生产模式

在开发过程中，Vue提供了很多警告，以帮助您解决常见的错误和缺陷。但是，这些警告字符串在生产中变得毫无用处，并且会膨胀应用程序的有效负载大小。另外，这些警告检查中的一部分运行成本很小，可以在生产模式下避免。

没有构建工具

如果您正在使用完整版本，即通过脚本标签直接包含Vue而无需构建工具，请确保使用缩小版本（vue.min.js）进行生产。这两个版本都可以在安装指南中找到。

使用构建工具

当使用Webpack或Browserify等构建工具时，生产模式将由process.env.NODE_ENVVue的源代码确定，默认情况下它将处于开发模式。这两种构建工具都提供了覆盖此变量的方法，以启用Vue的生产模式，并且在构建期间警告将被缩小器剥离。所有vue-cli模板都为您预先配置了这些模板，但知道它是如何完成的将是有益的：

Webpack

使用Webpack的DefinePlugin来指示生产环境，这样UglifyJS可以在缩小时自动删除警告块。示例配置：

var webpack = require('webpack')

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

Browserify

使用NODE_ENV设置为的实际环境变量运行捆绑命令"production"。这说明vueify避免包含热重载和开发相关的代码。

将全局envify转换应用于您的包。这允许缩小器去掉包含在env变量条件块中的Vue源代码中的所有警告。例如：

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

或者，使用envify with Gulp：//使用envify自定义模块指定环境变量var envify = require（'envify / custom'）browserify（browserifyOptions）.transform（vueify），.transform（//必需为了处理node_modules files {global：true}，envify（{NODE_ENV：'production'}））.bundle（）RollupUse rollup-plugin-replace：const replace = require（'rollup-plugin-replace'）rollup（{// ... plugins：[replace（{'process.env.NODE_ENV'：JSON.stringify（'production'）}）]}）。然后（...）预编译模板当使用in-DOM模板或in-JavaScript模板字符串时，模板到渲染函数编译在运行中执行。在大多数情况下，这通常足够快，但如果应用程序对性能敏感，则最好避免使用它。预编译模板的最简单方法是使用单文件组件 - 关联的构建设置自动为您执行预编译，因此内置的代码包含已编译的渲染函数，而不是原始模板字符串。如果您使用的是Webpack，并且更喜欢分离JavaScript和模板文件，则可以使用vue-template-loader在构建步骤中也将模板文件转换为JavaScript渲染函数。提取组件CSS当使用单个文件组件时，CSS内部组件<style>通过JavaScript 动态注入为标签。这有一个很小的运行时间成本，如果你使用服务器端渲染，它会导致“无风格内容的闪光”。将CSS跨所有组件提取到同一个文件中可以避免这些问题，并且还可以实现更好的CSS缩小和缓存。请参阅相应的构建工具文档以了解它是如何完成的：

Webpack + vue-loader（vue-cliwebpack模板具有此预配置）

Browserify + vueify

Rollup + rollup-plugin-vue

跟踪运行时错误

如果组件的渲染过程中发生运行时错误，它将被传递给全局Vue.config.errorHandler配置函数（如果已设置）。将这个钩子和像Sentry这样的错误跟踪服务结合起来可能是一个好主意，Sentry为Vue 提供了一个官方集成。