vue路由代理

Posted 2021-09-22 guxiaohai_

一：简介

最近在开发项目中，作为一个后端小码农，由于工作分配原因前端也由自己负责。在搬砖过程中原来开始习惯性使用http.js管理接口ip路由，一切正常无疑。但是呢…就在部署时发现一个问题，路由ip居然是固定写死的，程序没有动态映射代理路由，每次都需要映射开放两个端口，分别前端端口和接口端口，这就让我非常的郁闷了…于是乎就百度…百度…度娘找资料，后来发现原来vue可以在vue.config.js中配置动态代理路由。话不多说，接下来看解决方案哈哈哈哈…我这里不仅使用了“http”代理方式，还使用了“websocket ws:”代理路由方式哦

二：解决方案

1. 设置vue.config.js路由代理

  //路由代理
  devServer: {
    port: port,
    open: true,
    proxy: {
      '/pigFarmServer': { //http（代理名称）
        target: 'http://ip:端口',
        changeOrigin: true,
        pathRewrite: {
          '^/pigFarmServer': '/'
        }
      },
      '/socket': {  //webSocket（代理名称）
        target: 'ws://ip:端口',
        ws:true,//开启ws, 如果是http代理此处可以不用设置
        changeOrigin: true,
        pathRewrite: {
          '^/socket': '/'
        }
      }
    },
  },

2. http路由请求
   注意：路径前面一定需要携带pigFarmServer，因为这个头部是用于区分vue.config.js代理具体映射到那个地址。（我在js中通过这个代理名称进来后，自动请求接口时又会将这个名称去除）
   
3. websocket ws路由请求
   location.host：node.js携带封装的路径ip地址函数
   socket：同理http上面介绍，用于具体区分映射那个路由代理
   

三：效果

以上就是整个处理流程，优化之后就只需要开放前端一个端口代理就行了，接口ip路径可使用内网