vue cli3项目多环境打包配置

此处主要讨论的是大于等于3种环境的打包配置，如果只有两种的话NODE_ENV 会是development、production ，这样的一般比较简单，下面将多种环境的配置，两种的可以参考类比。

首先配置package.json

{
    ...
    "scripts": {
        // 开发
		"dev": "vue-cli-service serve",
        // 测试
		"build:dev": "vue-cli-service build --mode development",
        // 生产
		"build:pro": "vue-cli-service build --mode production",
        // 其它2
		"build:feat": "vue-cli-service build --mode feat",
        // 其它2
		"build:fix": "vue-cli-service build --mode fix"
	},
    ...
}

默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用于 vue-cli-service test:unit

--mode 选项参数为命令行覆写默认的模式。

其次新建.env开头的文件

在项目根目录创建

# 文件名 .env.feat
NODE_ENV = 'feat'

# 文件名 .env.fix
NODE_ENV = 'fix'

#为注释，文件名的后缀要和package.json中配置mode的一样，开头统一为.env。这样配置之后可以通过process.env.NODE_ENV来判断不同环境下配置

或者也可以通过其他变量来做判断

# 文件名 .env.fix
NODE_ENV = 'production'
VUE_APP_BASE = 'fix'

可以通过process.env.VUE_APP_BASE来获取变量做相应的配置，NODE_ENV也可以是development，注意：变量必须是VUE_APP_开头才可以；BASE_URL 变量 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

最后就是根据环境变量和模式更改配置

不同人不同项目有不同的需求更改配置，主要分为两种，一种是打包的配置，即根据不同环境进行不同的打包配置，修改vue.config.js；一种是项目配置，一般是修改不同的请求地址。项目内和vue.config.js中都可以获取 process.env下的对象属性NODE_ENV或者VUE_APP_开头来做判断，进行个性化处理。