vue3.0下配置多环境打包

首先在项目根目录下新建3个文件

①.env.testt配置（就是测试环境）

NODE_ENV = 'test'
VUE_APP_CURENV = 'test'

② .env.development配置（就是开发环境）

NODE_ENV = 'development'
VUE_APP_CURENV = 'development'

③ .env.production配置（就是生态环境及线上环境）

NODE_ENV = 'production'
VUE_APP_CURENV = 'production'

其次在封装api接口的文件下判断,当时处于什么环境

let Base_URL
if(process.env.NODE_ENV === 'development'){     //开发环境
    Base_URL="开发环境"
}else if(process.env.NODE_ENV === 'test'){     //测试环境
    Base_URL="测试环境"
}else if(process.env.NODE_ENV === 'production'){    //生产环境
    Base_URL="生产环境"
}

最后一步就是打包不同环境以及运行不同环境。在你的package.json里面的script写

"scripts": {
    "prod": "vue-cli-service serve --mode production",
    "dev": "vue-cli-service serve --mode development",
    "test":"vue-cli-service serve --mode test",
    "build": "vue-cli-service build --mode test",
    "pro-build": "vue-cli-service build --mode production",
    "dev-build": "vue-cli-service build --mode development",
    "lint": "eslint --fix --ext .js,.vue src"
  },

运行开发环境：npm run dev

运行测试环境：npm run test

运行生态环境：npm run prod

打包开发环境：npm run dev-build

打包测试环境：npm run build

打包生态环境：npm run pro-build