原理：

先发起一个请求到本地开发服务器，开发服务器将请求转发到目标 API 服务器；因为这是“服务器对服务器”的通信，不受浏览器同源策略限制；

一、配置vue.config.js 文件

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({

    devServer: {

        proxy: {

            "/api": {

                target: "https://api.example.com",//远程服务器地址

                changeOrigin: true,

                pathRewrite: {

                    "^/api": "",

                },

            },

        },

    },

});

二、修改基础请求地址

VUE_APP_API_URL=https://api.example.com

改为：

VUE_APP_API_URL=/api

三、替换原理

远程服务器地址+‘/api’ 替换为 本地地址+‘/api’，如果设置了

pathRewrite: {

                    "^/api": "",

   },

远程服务器地址 就是变成了 本地地址+‘/api’ 远程地址没有/api 部分内容，也可以理解成本地设置的使用/api的地方直接替换的是远程地址，代码里 /api = 远程地址。

踩坑心得：使用axios 封装请求baseURL结尾不是‘/’也会添加上‘/’,拼接的时候要注意

注： 如果是vite项目，是加在server下，devServer替换成server