此文章是自己理解所记录文档，可能描述或者说明有些不妥。

配置文件

.env.development：开发环境下的配置文件,执行npm run serve命令，会自动加载.env.development文件.
 
.env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件

命名规则

属性名必须以VUE_APP_开头
比如VUE_APP_BASE_API_D

.env.development文件配置

# 开发环境配置(本地)
ENV = 'development'
NODE_ENV = development

# 开发环境  代理proxy
VUE_APP_BASE_API = '/dev-api'

# 开发环境  网关URL
VUE_APP_REQUEST_URL = 'http://8.130.10.12:7071'

.env.productio文件配置

# 生产环境配置
ENV = 'production'
NODE_ENV = production

# 生产环境  代理proxy
VUE_APP_BASE_API = '/pro-api'

# 生产环境 网关URL
VUE_APP_REQUEST_URL = 'http://8.130.10.12:7071'

axios请求配置文件

// npm run serve 启动项目 当前是本地开发环境
if (process.env.NODE_ENV === "development") {
  axios.defaults.baseURL = process.env.VUE_APP_BASE_API //  '/dev-api'
} else {
  // 如果是生产环境本地代理无作用 ， 代理只对本地运行有效
  axios.defaults.baseURL = process.env.VUE_APP_REQUEST_URL  // 'http://8.130.10.12:7071'
}
console.log(axios.defaults.baseURL); //  '/dev-api'

请求接口方法文件

const prefix = '/park'

//请求方法
export function login(params) {
  return request({
    url: `${prefix}/token/generateToken`,
    method: 'post',
    data: params
  })
}
// 当页面调用 login 方法浏览器掉用的接口是 http://localhost:8080/dev-api/park/token/generateToken

vue.config.js配置文件（代理proxy配置方式1）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true,
  devServer: {
    port: 8080,
    host: 'localhost',
    open: true,
    https: false,
    proxy: { // 配置跨域
      '/park': {
        target: 'http://8.130.10.12:7071',
        ws: true,
        changOrigin: true,//是否跨域
        pathRewrite: {
          '^/park': '' //需要rewrite的,
        }
      },
    }
  },
})

代理执行过程

1、首先在 devServer 中设置了 匹配本地请求地址含 '/park' ，target中设置了代理的目标服务器地址 : 'http://8.130.10.12:7071', 也就是接口最开头的那个地址
例如请求地址为：
http://localhost:8080/dev-api/park/token/generateToken，则把
http://localhost:8080 换成 http://8.130.10.12:7071

2、这个时候如果访问接口如： 'http://localhost:8080/dev-api/park/token/generateToken',因为接口包含'/park',就相当于请求 'http://8.130.10.12:7071/dev-api/park/token/generateToken'（开发环境）或'http://8.130.10.12:7071/pro-api/park/token/generateToken' （生产环境）

3、pathRewrite的作用是将 '/park' 进行替换为''
  所以真正的请求地址是'http://8.130.10.12:7071/dev-api/token/generateToken'（开发环境） 
  或 'http://8.130.10.12:7071/pro-api/token/generateToken' （生产环境）

注：配置了代理proxy，修改内容后：一定要重启项目

调用接口逻辑

1. vue.config.js配置代理方式1

当页面调用 login 方法浏览器掉用的接口是 
'http://localhost:8080/dev-api/park/token/generateToken'
因为配置了代理，所以真正请求的地址是(/park替换为'')
'http://8.130.10.12:7071/dev-api/token/generateToken'

2. vue.config.js配置代理方式2

//当 vue.config.js配置文件 配置的代理proxy是这样
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  publicPath: './',
  transpileDependencies: true,
  devServer: {
    port: 8080,
    host: 'localhost',
    open: true,
    https: false,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_REQUEST_URL,//'http://8.130.10.12:7071'
        ws: true,
        changOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '' 
            //需要rewrite的,process.env.VUE_APP_BASE_API:'/dev-api'
        }
      }
    }
  },
})

此时代理匹配的地址就是process.env.VUE_APP_BASE_API所对应的，
如果是开发环境（npm run serve启动项目）则匹配 '/dev-api',
如果是生产环境（npm run build启动项目）则匹配 '/pro-api'

当页面调用 login 方法浏览器掉用的接口是 
'http://localhost:8080/dev-api/park/token/generateToken'
因为配置了代理，所以真正请求的地址是(/park替换为'')
'http://8.130.10.12:7071/park/token/generateToken'