生产环境部署

利用生产状态

开发时,Vue 会提供很多警告来帮你解决常见的错误与陷阱。生产时,这些警告语句却没有用,反而会增加你的载荷量。再次,有些警告检查有小的运行时费用,生产时可以避免的。

不用打包工具

如果用 Vue 完整独立版本(直接用 <script> 元素引入 Vue),生产时应该用精简版本(vue.min.js)。请查看安装指导,附有开发与精简版本。

用打包工具

如果用 Webpack 或 Browserify 类似的打包工具时,生产状态会在 Vue 源码中由 process.env.NODE_ENV 决定,默认在开发状态。Webpack 与 Browserify 两个打包工具都提供方法来覆盖此变量并使用生产状态,警告语句也会被精简掉。每一个 vue-cli 模版有预先配置好的打包工具,但了解怎样配置会更好。

Webpack

使用 Webpack 的 DefinePlugin 来指定生产环境,以便在压缩时可以让 UglifyJS 自动删除代码块内的警告语句。例如配置:

var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
}

Browserify

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
NODE_ENV=production browserify -g envify -p [ vueify/plugins/extract-css -o build.css ] -e main.js | uglifyjs -c -m > build.js

跟踪运行时错误

如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数(如果已设置)。利用这个钩子函数和错误跟踪服务(如 Sentry,它为 Vue 提供官方集成),可能是个不错的主意。

提取 CSS

使用单文件组件时,<style> 标签在开发运行过程中会被动态实时注入。在生产环境中,你可能需要从所有组件中提取样式到单独的 CSS 文件中。有关如何实现的详细信息,请查阅 vue-loadervueify 相应文档。

vue-cli 已经配置好了官方的 webpack 模板。