vue devSever中如何配置多个proxy 代理及pathRewrite路径重写

最近项目中需要新增人脸等陆的功能，但是后天开发需要用到python，这就使得一个前端根据不同的URL访问两个不同的后端。生成环境使用的是nginx，前端使用的是vue，就琢磨了一下vue devServer中如何配置多个proxy 代理和pathRewrite路径重写。

1、vue 项目如何配置多个 proxy 代理。

首先找到vue项目下的vue-config.js,然后ctrl+f，定位到devServer。

进行vue开发是配置代理与nginx配置代理有点类似，也是使用正则匹配。我的配置如下：

  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    https: true,
    proxy: {
      '/face-api/': { // 匹配以//face-api开头的才生效 
        target: "http://192.168.1.222:81",  // 实际请求主机，端口，协议
        changeOrigin: true,                 // 如果接口跨域这里就要这个参数配置
        secure:false,                       // 如果实际请求地址是https接口，则设置为true
        pathRewrite: {        
          '^/face-api/': '/'                // 将本地 /face-api/xxx 的请求代理为请求 http://192.168.1.222:81/xxx 并将结果返回给客户端
        }               
      },
      '/admin-api/': { // 匹配以//admin-api开头的才生效 
        target: "http://192.168.1.222:48080",  // 实际请求主机，端口，协议
        changeOrigin: true,                 // 如果接口跨域这里就要这个参数配置
        secure:false,                       // 如果实际请求地址是https接口，则设置为true
        pathRewrite: {
          '^/admin-api/': '/admin-api/'     // 将本地 ~/admin-api/xxx 请求转发为请求 http://192.168.1.222:48080/admin-api/xxx  并将结果返回给客户端
        }               
      }
    },

这需要提到两点：

1）正则表达式配置重叠的情况，如/face-api/ 和 /face-api/login 在进行路径 /face-api/login 匹配时，两个正则表达式都能匹配上，他根据配置顺序进行选择。

2）如果一台两个应用部署在同一台服务器，而且有不同的context，一个是/oa，一个是/erp，可以进行合并，如下：

  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    https: true,
    proxy: {
      '/oa|/erp': { 
        target: "https://124.71.63.200",
        changeOrigin: true,                
        secure:false           
      },
    },
  }

2、vue 项目如何配置pathRewrite路径重写

上面的代码中已经对pathRewrite 做了配置，我理解就类似于string 的replace函数，将前面匹配到的部分用后面的部分替换。例如，我这里就将/face-api/ 代理到云服务器上的应用 /uhr/face-api/。

效果就是/face-api/xxx这的的请求，都给他带个帽子/uhr，都去请求https://124.71.63.200/uhr/face-api/xxx，并将结果返回给浏览器。

    proxy: {
      '/face-api/': { 
        target: "https://124.71.63.200",
        changeOrigin: true,                
        secure:false,                     
        pathRewrite: {
          '^/face-api/': '/uhr/face-api/' 
        }               
      },
    }

3、nginx代理配置

这部分配置，可以参考以前的文章。

Ruoyi-vue-pro Vue + nginx 二级目录部署到云服务器