设置多个跨域代理

有的时候需要在一个vue项目中设置多个后台服务地址，在网上找了一下，发现很多都是再复制一个request.js，感觉有点不合理，就试着自己写了一个。

1、vue.config.js

  devServer: {
    open: true,
    host: 'localhost',
    port: 9527,
    hot: true,
    proxy: {
      '/api': {
        target: 'http://192.1.5.0:8082',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      },
      '/list': {
        target: 'http://192.2.0.1:8082',
        changeOrigin: true,
        pathRewrite: {
          '^/list': '/'
        }
      }
    }
  }

        如果你测试的时候，两个地址一样，可能会出现一个报404的情况，需要将匹配度低的放在后面。原因是这里的匹配实际上是一个正则匹配的过程，当我们请求 /api 时，首先读取到了配置项中的第一个， 拿配置中的 / 去匹配请求中的 /api ， 发现请求的/api 中包含配置项/, 匹配成功。

2、request.js

// 1. 创建新的axios实例，
const service = axios.create({
  baseURL: '/',
  timeout: 5000
})

3、api.js

import request from '@/utils/request'

export function surveySnSerialNumber () {
  return request({
    url: 'api/clsBase/surveySn',
    methods: 'get'
  })
}
export function login (data) {
  return request({
    url: 'list/clsUser/doLogin',
    method: 'post',
    data
  })
}