vue配置多个服务端请求地址（使用vue-admin-template举例说明）

在实际开发中，前端除了请求后端服务器还可能会请求文件服务器等，他们的地址是不一样的，例如后台地址是localhost:8001，文件服务器是localhost:8002，这里我使用vue-admin-template后台模板来举例如何配置。

配置跨域代理

在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。

首先，配置好前端跨域代理，在vue.config.js中

 其中process.env.VUE_APP_BASE_API代表.env.development文件中的VUE_APP_BASE_API

我们可以从request.js中看到请求地址会是VUE_APP_BASE_API（/dev-api）+请求路径。

 我们验证一下：

 可以看到此时请求地址都是http://localhost:9528/dev-api/+请求路径，这样前端跨域就配置好了，通过前端代理，实际的请求地址是http://localhost:8001/+请求路径。

 这样文章开头的问题就产生了，所有请求都是默认代理请求的是localhost:8001，当我们使用文件上传或者请求别的服务，如果文件服务器地址是localhost:8002，那我们就不会请求到，那么该如何配置呢？

通俗的说就是把/dev-api之前的都换成了localhost:8002，然后交给启动vue项目的服务器去请求。

配置多个服务端请求

其实只要弄明白了上面处理跨域的过程，就很容易理解如何配置多个服务器请求，无非是再处理一遍，在.env.development文件中添加新的代理字段，VUE_APP_UPLOAD_API = '/dev-upload-api'

对应的在vue.config.js中添加一个新的代理，

我们复制request.js,改名request-proxy.js，内容一致，只修改baseURL：''

（1）在上传图片文件时如下图的写法，请求路径会变成http://localhost:9528/dev-upload-api/upload/uploadImage，实际上的请求路径是http://localhost:8002/upload/uploadImage，就成功了。

（2）在请求的需要使用的api文件中如下图引入使用

这样请求路径会变成http://localhost:9528/dev-upload-api/+请求路径,实际的请求地址变成了http://localhost:8002/+请求路径。

可能你的项目不是使用的vue-admin-template，但只要是vue+axios，配置的思路都是一样的，只要能理解了如何配置，相信你也可以解决自己的问题。