Vue.js 2.0 生产环境部署

Posted Python大师

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 2.0 生产环境部署相关的知识,希望对你有一定的参考价值。

Vue.js 2.0 生产环境部署

删除警告

为了减少文件大小,Vue 精简独立版本已经删除了所有警告,但是当你使用 Webpack 或 Browserify 等工具时,你需要一些额外的配置实现这点。

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"。等于告诉 vueify 避免引入热重载和开发相关代码。

  • 使用一个全局 envify 转换你的 bundle 文件。这可以精简掉包含在 Vue 源码中所有环境变量条件相关代码块内的警告语句。例如:

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

  • 使用 vueify 中包含的 extract-css 插件,提取样式到单独的css文件。

    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-loader 和  vueify 相应文档。


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


以上是关于Vue.js 2.0 生产环境部署的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 生产环境部署

node+webpack环境搭建 vue.js 2.0 基础学习笔记

我怎么知道 Vue.js 环境是开发环境还是生产环境?

vue.js 2.0 --- 安装node环境和脚手架(入门篇)

sh 配合Vue.js配置Webpack - 31.告诉执行环境,我们需要生产环境

Vue.js 使用不同的环境变量构建