vue-cli3 区分开发环境、测试环境和生产环境

开发环境好区分，process.env.NODE_ENV='development'就是开发环境，否则，就是生产环境。生产环境如果想区分是测试还是正式，就需要使用下面的方法

一、在项目根目录下新建三个配置文件.env、.env.test、.env.build

.env 无论哪个环境都会加载的配置文件

NODE_ENV=development
VUE_APP_API_BASE_URL=测试域名

.env.test 测试环境加载的配置文件

outputDir=dist-test
NODE_ENV=production
VUE_APP_CURRENTMODE=test
VUE_APP_API_BASE_URL=测试域名

.env.build 正式环境加载的配置文件

outputDir=dist
NODE_ENV=production
VUE_APP_CURRENTMODE=build
VUE_APP_API_BASE_URL=正式域名

二、修改项目根目录下的 package.json 文件

// 在scripts中加入以下代码
"scripts": {
"serve": "vue-cli-service serve",
    "build:prod": "vue-cli-service build --mode build",
"build:test": "vue-cli-service build --mode test",
"build": "vue-cli-service build --mode build && vue-cli-service build --mode test",
}

三、修改项目根目录下的 vue.config.js 文件

outputDir: process.env.outputDir

四、在package.json中使用

npm run serve        // 本地运行
npm run build:prod   // 打包正式 dist 文件
npm run build:test   // 打包测试 dist-test 文件
npm run build // 打包 dist 和 dist-test 两个文件