1. 官方文档 vue-cli中 配置参考proxy

写的配置多个代理如下代码，官方地址

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true,
        pathRewrite: { //我自己添加，路径重写
            '^api': ''
        }
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

确实还不够用，还要配置pathRewrite，有些还要好好解释一下

ws: true,  //代理websockets

changeOrigin: true, // 是否跨域，虚拟的站点需要更管origin
pathRewrite: 这部分是路径重写，因为上面前端请求接口多增加 api，需要匹配到时，删除api，这个用来匹配代理的字符串

关于具体pathRewrite 路径重写知识如下图，具体官网地址

2. 自己做的案例

背景：访问百度开放地图接口，所以前端必须要代理，不然就会产生跨域

//App.vue

<template>
  <div></div>
</template>

<script>
export default {
  name: "login",
  mounted() {
    let param = {
      query: "峨眉山市胜利街道白龙社区居民委员会",
    };
    // api 就是代理匹配字段
    //真实路径/place/v2/search?query=${param.query}&tag=&region=乐山市&output=json&ak=Z4ytjPbatVeupWZUxL0HfjD8TbPUcZPV`
    axios.get(
        `/api/place/v2/search?query=${param.query}&tag=&region=乐山市&output=json&ak=Z4ytjPbatVeupWZUxL0HfjD8TbPUcZPV`
      )
      .then((res) => {
        let arr = res.data.results;
        let obj = arr[0];
        console.table(
          param.query,
          "经度" + obj.location.lng,
          "纬度" + obj.location.lat
        );
      });
  },
};
</script>

//vue.config.js

module.exports = {
  devServer: {
    proxy :{
      '/api':{
        target: "https://api.map.baidu.com",
        ws: true,  //代理websockets
        changeOrigin: true,  是否跨域，虚拟的站点需要更管origin
        pathRewrite: {
          '^/api': ''
        }
      },
      '/test':{
        target: "https://api.map.baidu.com",
        ws: true,  
        changeOrigin: true,
        pathRewrite: {
          '^/test': ''
        }
      }
    }
  }
}

3. 解释多个代理匹配的问题

在浏览器中看到的结果：api其实还在，其实访问是正确的，因为这里就是这样，隐藏真实访问路径（ 真实访问路径 /place/v2/search/.. ）

4. 生产环境前端代理将不起作用，后端配置nginx

前端在开发环境可以通过配置代理来使用数据，但打包后前端变成了静态文件，需要后端需要配置nginx的服务文件

Server{
	location /yuqstart {
		proxy_pass https://api-open.51wyq.cn;
	},
    location 路径名{
		proxy_pass 路径地址;
	},

}