vue项目 接口代理处理 简单易懂

vue.config.js

module.exports = {
  devServer: {
     '/abc': {
        target: 'http://192.168.166.27:8025/', // 测试环境
        changeOrigin: true
      },
  }
}

假如有接口调用的时候写的url是：aixos.get('/abc/api/save')
实际调用地址是 http://192.168.166.27:8025/abc/api/save
pathRewrite:作用是把匹配到路径重新改写一次

module.exports = {
  devServer: {
     '/abc': {
        target: 'http://192.168.166.27:8025/', // 测试环境
        changeOrigin: true
        pathRewrite: {
        	  '/abc': '/bbc/abc'
        }
      },
      '/bbc': {
        target: 'http://192.168.166.28:8025/', // 不同ip
        changeOrigin: true
      },
  }
}

这样重写的意义是假如有/bbc接口和/bbc/abc接口代理的后端不一样，所以只能使用/abc来替换 /bbc/abc接口。

假如有接口调用的时候写的url是：aixos.get('/abc/api/save')
实际调用地址是 http://192.168.166.27:8025/bbc/abc/api/save

假如有接口调用的时候写的url是：aixos.get('/bbc/api/save')
实际调用地址是 http://192.168.166.28:8025/bbc/api/save