生产部署

如果您使用的是 Vue CLI，则以下大多数提示默认启用。本节仅与您使用自定义构建设置相关。

启用生产模式

在开发过程中，Vue 提供了许多警告，以帮助您解决常见错误和陷阱。但是，这些警告字符串在生产环境中变得毫无用处，并且会增加应用程序的有效负载大小。此外，其中一些警告检查会产生少量运行时成本，这些成本可以在生产模式下避免。

没有构建工具

如果您使用的是完整构建，即直接通过脚本标签包含 Vue，而没有使用构建工具，请确保在生产环境中使用最小化版本 (vue.min.js)。这两个版本都可以在安装指南中找到。

使用构建工具

当使用 Webpack 或 Browserify 等构建工具时，生产模式将由 Vue 源代码中的 process.env.NODE_ENV 确定，默认情况下它将处于开发模式。两种构建工具都提供覆盖此变量以启用 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 源代码中所有用 env 变量条件块包装的警告。例如
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

或者，使用 envify 与 Gulp

// Use the envify custom module to specify environment variables
var envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // Required in order to process node_modules files
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()

或者，使用 envify 与 Grunt 和 grunt-browserify

// Use the envify custom module to specify environment variables
var 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()
    }
  }
}

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 会通过 JavaScript 动态地作为 <style> 标签注入。这会产生少量运行时成本，如果您使用服务器端渲染，它会导致“未样式内容闪烁”。将所有组件中的 CSS 提取到同一个文件中将避免这些问题，并且还会导致更好的 CSS 最小化和缓存。

请参考相应的构建工具文档以了解它是如何完成的

Webpack + vue-loader (vue-cli webpack 模板预先配置了此功能)
Browserify + vueify
Rollup + rollup-plugin-vue

跟踪运行时错误

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

← TypeScript 支持路由 →

指南

基础

组件深入

过渡和动画

可重用性和组合

工具

扩展

内部机制

迁移

元数据

生产部署

启用生产模式

没有构建工具

使用构建工具

Webpack

Browserify

Rollup

预编译模板

提取组件 CSS

跟踪运行时错误

指南 3.x 2.x 1.0 0.12 0.11

基础

组件深入

过渡和动画

可重用性和组合

工具

扩展

内部机制

迁移

元数据

生产部署

启用生产模式

没有构建工具

使用构建工具

Webpack

Browserify

Rollup

预编译模板

提取组件 CSS

跟踪运行时错误

指南