vue分环境打包

1. 什么是分环境打包

在开发中，项目一般分为开发环境、测试环境、生产环境等。

我们在本地运行或打包时，调用不同环境的接口等在有一些项目中是通过注释相关的配置来实现。例如：

const environment = 'dev'
const environment = 'test'
const environment = 'prod'

if (environment === 'dev') {
	...
} else if (environment === 'test') {
	...
} else if (environment === 'prod') {
	...
}

类似上述的方式来实现不同环境中的配置，是比较麻烦的。

vue-cli 文档中提供了可以通过 .env 后缀文件的形式配置不同的模式(也就是不同的服务器环境)，达到使用 npm run [mode] 命令来运行或打包不同环境的项目。

2. 如何分环境打包

第一步，在项目中创建不同的模式.env[mode]

第2步，在 package.json 配置不同模式的命令

第3步，配置完成之后就可以通过命令来执行不同环境了。例如：

npm run prodserve
// 执行该命令, 启动的本地服务会调用prodserve模式, 相关的配置