携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

1. 问题描述

在实际项目开发中，前端无法避免的可能会遇到一个问题，那就是项目中会有多个不同服务端的请求地址，例如当前项目的接口地址是 http://192.168.1.1:9001/user/list， 需要对接的其他项目的接口地址是  http://12.102.1.1:9000/user/list， 那么我们该如何配置，才能实现两种接口都能调用。 

2. 解决办法

其实这个问题并不难解决，以 vue-admin-template 后台模板为例，仔细研究其原理，可以发现我们只需要以下4个步骤就能解决这个问题，具体如下：

第一步

修改 .env.development 文件，配置多个服务端请求，如果项目打包还需要将 .env.production 文件也修改一下，代码如下：

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'
ANOTHER_VUE_APP_BASE_API = '/another-dev-api'

# base url
VUE_APP_BASE_URL = 'http://192.168.1.1:9001'
ANOTHER_VUE_APP_BASE_URL = 'http://12.102.1.1:9000'

第二步

修改 vue.config.js 文件，配置跨域代理，其实无非就是增加一遍 proxy 的配置，将 .env.development 文件中的 ANOTHER_VUE_APP_BASE_API 和 ANOTHER_VUE_APP_BASE_URL 配置上即可，代码如下：

proxy: {
     [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_BASE_URL,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '' // 思路是如果是开发环境，就给所有要代理的接口统一加上前缀，然后代理请求时再统一通过rewrite去掉
        }
     },
     [process.env.ANOTHER_VUE_APP_BASE_API]: {
        target: process.env.ANOTHER_VUE_APP_BASE_URL,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.ANOTHER_VUE_APP_BASE_API]: '' // 另一个服务端
        }
     }
}

第三步

在 src/utils 下找到 request.js 文件并复制一份，重命名为 anotherRequest.js，修改该文件中的 baseURL 为 .env.development 文件中配置的 ANOTHER_VUE_APP_BASE_API 即可，代码如下：

// create an axios instance
const service = axios.create({
  baseURL: process.env.ANOTHER_VUE_APP_BASE_URL, // url = base url + request url
  timeout: 600000 // request timeout
})

第四步

以上三步都配置好以后，在接口请求中如何使用？只需要在对应的 api 文件中进行引用并使用即可，代码如下：

import request from '@/utils/request'
import anotherRequest from '@/utils/anotherRequest'

export default {
  getUserList() {
    return request({
      url: '/user/list',
      method: 'get'
    })
  },
  
  getAnotherUserList() {
    return anotherRequest({
      url: '/user/list',
      method: 'get'
    })
  },
}

学废了吗？