使用 Vue.js 作為前端框架，通常需要與服務(wù)器進(jìn)行交互獲取數(shù)據(jù)。Axios 是一個(gè)常用的基于 Promise 的 HTTP 庫(kù)，可以幫助我們輕松地發(fā)送 AJAX 請(qǐng)求并處理響應(yīng)。在 Vue CLI 項(xiàng)目中整合 Vue Axios，可以方便地編寫API請(qǐng)求，本文將介紹如何配置 Vue Axios。

首先，我們需要通過 npm 安裝 Axios：

npm install axios --save

然后在 Vue 項(xiàng)目中引入 Axios：

import axios from 'axios'

接著，我們可以在 Vue 原型上注冊(cè) Axios：

Vue.prototype.$axios = axios

這樣，在組件內(nèi)可以通過this.$axios訪問 Axios 實(shí)例。不過，還需要配置 Axios 的默認(rèn)請(qǐng)求頭和接口 URL。

我們可以在 src 目錄下新建一個(gè) axios.js 文件，用于存放 Axios 配置：

import axios from 'axios'
const instance = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 10000,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
export default instance

上面的代碼中，使用了 Axios.create() 方法創(chuàng)建了一個(gè) Axios 實(shí)例。其中，baseURL 是接口服務(wù)器的地址，timeout 是請(qǐng)求超時(shí)時(shí)間，headers 是請(qǐng)求頭配置。在 vue.config.js 文件中定義環(huán)境變量 VUE_APP_BASE_API，方便在不同環(huán)境下配置 baseURL。

然后，我們可以在 main.js 中引入 axios.js 文件，并將 axios 實(shí)例掛載到 Vue 原型上：

import Vue from 'vue'
import App from './App.vue'
import axios from './axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
new Vue({
render: h =>h(App),
}).$mount('#app')

到這里，我們已經(jīng)完成了 Vue Axios 的配置。在組件中通過this.$axios.get()或this.$axios.post()等方法即可發(fā)送請(qǐng)求。如果想了解更多 Axios 的用法，可以訪問官方文檔。