@vue/cli(vue脚手架3)区分打包build文件 测试环境和生产环境

问题：在开发阶段有时候需要build打包上传到uat测试环境进行测试，当某些功能已经测试完成需要发布到正式环境时，通常需要更改一些配置，比如baseURL，如果每次都手动更改会比较麻烦，因为我们可以通过以下配置来区分。
分析：在开发阶段，process.env.NODE_ENV是development，而打包build后，process.env.NODE_ENV是production，因此无法通过process.env.NODE_ENV来区分测试环境和生产环境，这时我们就需要增加变量（VUE_APP_CURRENTMODE）来区分。这就需要两个配置文件，在项目根目录下新建.env.test和.env.production两个文件。

.env.test文件配置

.env.production文件配置

其中VUE_APP_CURRENTMODE是用于区分测试环境还是生产环境的变量，outputDir是打包后的输出目录
注意：需要在顶级配置文件vue.config.js（在项目根目录下新建）中配置输出目录

配置完以上信息后，我们需要在package.json中配置脚本（scripts），用于打包执行的命令。
注释：
"build": "vue-cli-service build --no-clean --mode production"
①运行yarn build/npm run build 可以生成dist目录，该目录下的文件即可运行到生产环境中。–mode production：其中production是.env.production文件的后缀名（亲测不是VUE_APP_CURRENTMODE的配置），如果你写的是.env.build，那么就应该使用–mode build。
②–no-clean：当build时，目标目录（dist）会在构建之前被清除然后再重建，加上–no-clean可以阻止这一默认行为
"test":"vue-cli-service build --mode test"
①运行yarn test/npm run test可以生成test目录，该目录下的文件即可运行到测试环境中

**以上是@vue/cli打包build文件 区分测试环境和生产环境的配置，那么接下来讲一下如何使用：**
通常我们会针对不同的环境配置不同的baseURL，这就可以根据我们以上定义的变量来配置对应的baseURL了

通过以上配置，不同环境执行对应的打包命令，找到对应的打包文件即可将测试环境和正式环境区分开了。
—————————————————————————————————————————————
2021.03.08更新

1.process.env 是 Node.js 中的一个环境对象。其中保存着系统环境的变量信息，而 NODE_ENV 就是其中的一个环境变量。
2.默认情况下，一个Vue CLI项目有三个模式：
	①development 模式用于vue-cli-service serve
	②production 模式用于vue-cli-service build 
	③test 模式用于vue-cli-service test:unit
	注意模式不同于NODE_ENV，一个模式可以包含多个环境变量。也就是说，每个模式都会将NODE_ENV的值设置为模式的名称—比如在development模式下NODE_ENV的值会被设置为“development”
3.在 Vue 中， NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置
4.在package.json文件中的命令行后直接使用 --mode 参数手动指定模式
（参数为.env.[mode]中的mode），当执行命令时，就可以使用对应.env.[mode] 文件中的配置了