vue proxy代理

在Vue中，可以使用代理（proxy）配置来实现服务器代理。代理配置可以在项目的vue.config.js文件中进行设置。通过使用代理，可以将前端请求发送到指定的后端接口地址。代理配置可以根据请求路径的不同进行匹配，并将请求转发到对应的后端接口。

在vue.config.js文件中，通过devServer的proxy属性来配置代理。可以为不同的请求路径设置不同的target（后端接口地址），changeOrigin（改变请求源），ws（启用WebSocket代理），secure（禁用安全检查）等属性。

例如，如果需要将请求路径以/abc开头的请求代理到http://XX.XX.XX.XX:8081这个后端接口地址，可以在proxy中进行如下配置：

devServer: {
 proxy: {
    "/abc": {
      target: "http://XX.XX.XX.XX:8081",
      changeOrigin: true,
      ws: true,
      secure: false
    }
  }
}

这样，在前端发送的请求中，以/abc开头的请求将被代理到http://XX.XX.XX.XX:8081这个后端接口地址。

另外，如果需要监测多个接口并进行代理，可以在proxy中写多个配置，每个配置对应一个目标后端接口地址。例如：

devServer: {
  proxy: {
    "/zzz": {
      target: "http://XX.XX.XX.XX:8082",
      changeOrigin: true,
      ws: true
    },
    "/xxx": {
      target: "http://XX.XX.XX.XX:8083",
      changeOrigin: true,
      ws: true
    }
  }
}

这样，请求路径以/zzz开头的请求将被代理到http://XX.XX.XX.XX:8082这个后端接口地址，而请求路径以/xxx开头的请求将被代理到http://XX.XX.XX.XX:8083这个后端接口地址。