@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了

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