Vue | 28 工具 - 产品部署

最新推荐文章于 2024-03-04 10:12:06 发布

LorneNote

最新推荐文章于 2024-03-04 10:12:06 发布

阅读量271

点赞数

分类专栏： Frontend technology 文章标签： vue frontend technology framework

Frontend technology 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

主要内容：

打开生产模式的几种配置方式
预编译模板
提取组件CSS的方式
追踪运行时错误

如果你使用Vue CLI以下大部分建议是默认可用的。如果你使用的是自定义的构建设置时，这章才是相关的。

打开生产模式

在开发阶段，Vue对于常见的错误和陷阱提供了许多警告来提醒你。然而，这些警告在生产环境变得没有用了，并且增加了app的尺寸。另外，这些警告检查所产生的时间花费也是应该在生产环境避免的。

没有构建工具

如果你正在使用完整的构建，例如：通过script标签直接导入Vue而没有使用构建工具，确保使用小版本（vue.min.js）在生产环境。两个版本都可以在安装指南(英)找到。

使用构建工具

当使用像Webpack或Browserify这样的构建工具时，生产模式由Vue的源码内的process.env.NODE_ENV决定，它默认开发模式。构建工具提供了复写这个变量的方式来启动Vue的生产模式，警告通过minifiers构建期间将被去掉。所有的vue-cli模板都为你提供了预配置，但知道他们如何工作对你是有好处的：

Webpack
在Webpack 4+以上的版本，你可以使用mode操作项：

module.exprots = {
	mode: 'production'
}

但是在Webpack 3 以及之前的版本，你需要使用DefinePlugin：

var webpack = require('webpack')

module.exports = {
	// ...
	plugins: [
		// ...
		new wepack.DefinePlugin({
			'process.env.NODE_EVN': JSON.stringify('production')
		})
	]
}

Browserify

使用实际的NODE_ENV环境变量运行构建命令设置**“productions”**。这会告诉vueify去避免包含热重载和开发环境相关的代码。
应用一个envify转化你的包。这允许minifier去掉封装在Vue源码的环境变量条件模块的所有警告。例如：

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

或，在Gulp中使用envify：

// 使用envify自定义模块去指定环境变量
var envify = require('envify/custom')

browserify(browserifyOptions)
	.transform(vueify)
	.transform(
		// 为了处理node_modules 文件所必须的
		{ global: true},
		envify({ NODE_ENV: 'production' })
	)
	.bundle()

或，配合 Grunt 和 grunt-browserify使用envify ：

// 使用envify自定义模块去指定环境变量
var envify = require('envify/custom')

browserify: {
	dist: {
		options: {
			// 函数的作用是从grunt-browserify的默认顺序偏离
			configure: b => b
				.transform('vueify')
				.transform(
					// 为了处理node_modules文件所必须
					{ 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(...)