vue-cli 引入、配置axios的方法

封面图 • 2025-12-11 • Vue

在 Vue CLI 项目中使用 `axios` 是非常常见的做法，用于发起 HTTP 请求。下面我将详细说明如何在 Vue CLI 项目中引入和配置 `axios`。

---

## ✅ 一、安装 axios

首先确保你已经创建了一个 Vue CLI 项目，如果没有的话，可以使用以下命令创建：

```bash
vue create my-project
```

然后进入项目目录并安装 `axios`：

```bash
cd my-project
npm install axios
```

或者使用 yarn：

```bash
yarn add axios
```

---

## ✅ 二、引入 axios

### 方法一：全局引入（推荐）

你可以将 `axios` 注入到 Vue 实例中，这样在所有组件中都可以通过 `this.$axios` 来调用。

#### 步骤：

1. 在 `main.js` 中引入 axios 并挂载到 Vue 实例上：

```js
// main.js
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'

// 全局挂载 axios
Vue.prototype.$axios = axios

new Vue({
  render: h => h(App)
}).$mount('#app')
```

> ⚠️ 注意：这种方式虽然方便，但不推荐在大型项目中使用，因为容易造成命名冲突或难以维护。

---

### 方法二：使用插件方式引入（更推荐）

你可以创建一个自定义的 `axios` 插件，实现更灵活的配置和管理。

#### 步骤：

1. 创建一个文件 `src/plugins/axios.js`：

```js
// src/plugins/axios.js
import axios from 'axios'

export default {
  install(Vue) {
    Vue.prototype.$axios = axios
  }
}
```

2. 在 `main.js` 中注册这个插件：

```js
// main.js
import Vue from 'vue'
import App from './App.vue'
import axiosPlugin from './plugins/axios'

Vue.use(axiosPlugin)

new Vue({
  render: h => h(App)
}).$mount('#app')
```

---

## ✅ 三、配置 axios（可选）

你可以对 `axios` 进行一些统一配置，比如设置基础 URL、请求拦截、响应拦截等。

### 示例：添加请求拦截器和响应拦截器

```js
// src/plugins/axios.js
import axios from 'axios'

const service = axios.create({
  baseURL: 'https://api.example.com', // 基础 URL
  timeout: 5000, // 超时时间
})

// 请求拦截
service.interceptors.request.use(
  config => {
    // 可以在这里添加 token 或其他 headers
    // config.headers['Authorization'] = 'Bearer token'
    return config
  },
  error => {
    console.error('请求拦截错误:', error)
    return Promise.reject(error)
  }
)

// 响应拦截
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    console.error('响应拦截错误:', error)
    return Promise.reject(error)
  }
)

export default {
  install(Vue) {
    Vue.prototype.$axios = service
  }
}
```

---

## ✅ 四、在组件中使用 axios

在组件中可以直接通过 `this.$axios` 调用：

```vue
<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <p>{{ data }}</p>
  </div>
</template>

---

## ✅ 五、使用 async/await 更简洁

你可以结合 `async/await` 让代码更清晰：

```js
async fetchData() {
  try {
    const res = await this.$axios.get('/user')
    this.data = res
  } catch (err) {
    console.error(err)
  }
}
```

---

## 📌 总结

| 方法 | 优点 | 缺点 |
|------|------|------|
| 全局挂载 | 简单直接 | 不易维护，可能命名冲突 |
| 插件方式 | 模块化，便于管理 | 需要额外配置 |
| 自定义实例 | 可配置性强 | 更复杂 |

---

如果你需要更高级的封装（如基于 `axios` 的封装类、自动处理 token、错误提示等），可以告诉我，我可以提供更完整的封装方案。