1. 服务器代理

1.1 vue-cli项目

vue.config.js中配置：

   devServer: {
     host: '127.0.0.1',
     port: 8084,
     compress:true,                    //开启gzip
     open: true,                       // vue项目启动时自动打开浏览器
     proxy: {
         '/api': {                     // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
             target: "跨域的地址",      //目标地址，一般是指后台服务器地址
             changeOrigin: true,       //是否跨域(如果target是域名写法,必须写该属性)
             pathRewrite: {            // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
                 '^/api': "" 
             }
         }
     }
 }

1.2 vite项目

vite.config.ts中配置:

server: {
    proxy: {
      '/api': {
        target: 'http://81.68.144.194',        // 实际请求地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },

【注意】做了服务器代理，在axios中就不用配置baseURL，代码如下：

const http = axios.create({
    // baseURL:'请求的地址'  // 做了服务器代理此处不需要写baseURL
})

2. 开发环境 ---> env配置文件

2.1 env配置文件：

在vue项目中，env是全局配置文件，可以存储不同环境下的变量。使用vue-cli搭建项目，默认会在根目录创建一个.env文件，如果需要更多类型的.env文件，需要自行创建。

2.2 env配置文件的分类说明

.env 后缀的文件是全局默认配置文件，不论什么环境都会加载并合并。
.env.development 是开发环境下的配置文件，仅在开发环境加载。
.env.production 是生产环境下的配置文件（也就是正式环境），仅在生产环境加载。

以上三个命名不能变动，除此之外，可以另外自定义加上.env.test文件，也就是测试环境，或者.env.bata，也就是内部测试版，等等...

2.3 env文件配置步骤

2.3.1 新建 .env.development、.env.production 、.env.test 文件

.env.development文件配置如下： 变量命名必须以VUE_APP_开头

# just a flag
NODE_ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://****************'
VUE_APP_WEB_LINK='http://*********/memorialHall'
OUTPUT_DIR = 'dist_dev'

.env.production文件配置如下： 变量命名必须以VUE_APP_开头

# just a flag
NODE_ENV = 'production'

# base api
VUE_APP_BASE_API = 'http://****************'
VUE_APP_WEB_LINK='http://*********/memorialHall'
OUTPUT_DIR = 'dist_prod'

.env.test文件配置如下： 变量命名必须以VUE_APP_开头

# just a flag
NODE_ENV = 'test'

# base api
VUE_APP_BASE_API = 'http://****************'
VUE_APP_WEB_LINK='http://*********/memorialHall'
OUTPUT_DIR = 'dist_test'

2.3.2 配置启动文件

在package.json文件配置如下：

  "scripts": {
    "serve": "vue-cli-service serve",
    "serve-test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "all": "vue-cli-service build && vue-cli-service build --mode test"
  }

运行命令行说明如下：

1. npm run serve，启动项目，并且加载.env和.env.development文件
1. npm run serve-test，启动项目，并且加载.env和.env.test文件
1. npm run build，生产环境打包，其中.env和.env.production文件会加载
1. npm run test，测试环境打包，其中.env和.env.test文件会加载
1. npm run all，生产环境和测试环境同时打包，加载不同的.env文件

2.4 获取.env中的全局变量

在.env文件中设置了变量VUE_APP_BASE_URL = 'https://www.baidu.com'，
在项目中获取process.env.VUE_APP_BASE_URL

vue3的相关配置