vue配置两个接口请求地址

# 实现Vue配置两个接口请求地址

## 整体流程

在Vue项目中配置两个不同的接口请求地址，可以通过修改和配置`vue.config.js`文件来实现。除此之外，还需要使用`axios`这个库来发送请求并进行处理。

下面是实现这个目标的具体步骤：

| 步骤 | 操作 |
| ------ | ------ |
| 1 | 安装axios库 |
| 2 | 创建一个文件用于存放接口请求地址 |
| 3 | 在vue.config.js中配置代理 |

## 操作步骤

### 步骤1：安装axios库

在Vue项目中，使用axios库来发送HTTP请求是非常方便的。我们首先需要安装axios库，可以通过以下命令进行安装：

```bash
npm install axios --save
```

### 步骤2：创建一个文件用于存放接口请求地址

在Vue项目中，我们通常会将接口请求地址进行统一管理，可以创建一个单独的文件来存放这些地址。在src目录下，创建一个`api.js`文件，并在其中定义不同接口的请求地址，例如：

```javascript
// api.js
export const BASE_URL = 'https://api.example.com';
export const API1_URL = '/api1';
export const API2_URL = '/api2';
```

### 步骤3：在vue.config.js中配置代理

接下来，我们需要在`vue.config.js`文件中配置代理，以便将不同接口请求转发到正确的地址。在Vue项目的根目录下找到`vue.config.js`文件（如果不存在，可以在根目录新建），并添加如下代码：

```javascript
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api1': {
target: 'http://api1.example.com',
changeOrigin: true,
pathRewrite: { '^/api1': '' }
},
'/api2': {
target: 'http://api2.example.com',
changeOrigin: true,
pathRewrite: { '^/api2': '' }
}
}
}
}
```

在上面的配置中，我们定义了两个不同的代理规则，分别将以`/api1`和`/api2`开头的请求转发到不同的地址。需要注意的是`target`字段指定了目标地址，`changeOrigin`用于控制请求头中的Host字段，`pathRewrite`则是用于重写请求路径。

现在，我们已经完成了Vue项目中配置两个接口请求地址的操作，可以在组件中使用axios发送请求，并根据需要使用`api.js`文件中定义的地址。例如：

```javascript
// 在组件中使用axios发送请求
import axios from 'axios';
import { API1_URL, API2_URL } from './api.js';

axios.get(API1_URL)
.then(response => {
console.log(response.data);
});

axios.get(API2_URL)
.then(response => {
console.log(response.data);
});
```

通过以上配置和操作，我们成功实现了在Vue项目中配置两个不同接口请求地址的目标。希望这篇文章对你有所帮助！