1、新建三个环境的配置文件 

在src同级目录也就是根目录下新建文件：.env.development（开发环境）、.env.test（测试环境）、.env.production文件（生产环境）

2、三个环境的配置文件

开发环境 .env.development

# 开发环境
NODE_ENV = 'development'# 开发环境，api前缀
VUE_APP_BASE_API = '/api'#开发环境，Url地址
VUE_APP_BASE_RUL = 'http://xxxx:8081/

测试环境 .env.test

# 测试环境
NODE_ENV = 'test'# 测试环境，api前缀
VUE_APP_BASE_API = '/test-api'#测试环境，Url地址
VUE_APP_BASE_RUL = 'http://xxxx:8081/'

生产环境 .env.production

# 生产环境
NODE_ENV = 'production'# 生产环境，api前缀
VUE_APP_BASE_API = '/prod-api'#生产环境，Url地址
VUE_APP_BASE_RUL = 'http://xxxx:8081/'

3、vue.config.js文件配置本地服务器代理devServer

 // webpack-dev-server 相关配置devServer: {host: "0.0.0.0",port: port,open: false,proxy: {// detail: https://cli.vuejs.org/config/#devserver-proxy[process.env.VUE_APP_BASE_API]: {// 服务器target: `http://192.168.1.11:8080`,changeOrigin: true,pathRewrite: {["^" + process.env.VUE_APP_BASE_API]: "",},},},disableHostCheck: true,},

4、axios 配置baseURL

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
// 或
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分baseURL: process.env.VUE_APP_BASE_URL,// 超时timeout: 100000
})

5、package.json 配置打包、启动

"serve": "vue-cli-service serve",    //启动
"build:test": "vue-cli-service build --mode test",   //测试
"build:prod": "vue-cli-service build",   // 生产

vue配置开发环境和生产环境_vue项目开发环境和生产环境配置_前路漫漫雨纷纷的博客-CSDN博客

vue项目配置生产、测试和开发环境_vue环境配置 生产 开发 测试_林梓阳的博客-CSDN博客

vue配置开发环境，测试环境，生产环境跨域 - 简书 VUE配置proxy代理、开发环境、测试环境、生产环境 - 简书