vue.js - vue正式环境如何能配置多个请求的url？

Question

vue项目 打包放到服务器上之后 如何能做到 模块1 请求www.xxx1.com的接口，模块2请求www.xxx2.com的接口.... ..

这种能实现吗？需要怎么配置 动态配置

Answer 1

当然可以。你可以通过配置axios或者vue-request等http请求库来实现这个需求。下面以axios为例，给出一个基本的配置方法：

首先，安装axios：

npm install axios --save

然后，在main.js或者需要请求的模块中，导入axios并配置默认请求头信息：

import axios from 'axios'axios.defaults.baseURL = 'http://www.xxx1.com' // 根据实际需要更改axios.defaults.headers.common['Authorization'] = 'Bearer token' // 根据实际需要更改

在这里，baseURL是你的默认请求url，后面的请求都会在这个url的基础上加上具体的请求路径。而Authorization是一个示例，代表你的请求需要授权，你需要替换成实际的token。你也可以在这里添加其他的公共请求头信息。

然后，在你的组件中发起请求：

axios.get('/api/data') // 这里的'/api/data'是请求的具体路径，需要根据实际需要更改

这样，你就可以在所有请求中默认使用http://www.xxx1.com作为请求url，并可以在每个请求中指定具体的路径。如果你需要使用不同的url，你可以在每个请求中指定不同的路径或者使用不同的http方法。

对于模块2的请求url是www.xxx2.com的情况，你可以在axios的配置中使用baseURL来区分：

import axios from 'axios'axios.defaults.baseURL = 'http://www.xxx2.com' // 根据实际需要更改axios.defaults.headers.common['Authorization'] = 'Bearer token' // 根据实际需要更改

然后，在你的模块2的组件中使用axios发起请求：

axios.get('/api/data') // 这里的'/api/data'是请求的具体路径，需要根据实际需要更改

这样，你就可以在模块2的所有请求中默认使用http://www.xxx2.com作为请求url，并可以在每个请求中指定具体的路径。