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模板具有此预配置）
跟踪运行时错误
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
