如何全局配置axios

在实际项目开发中，几乎每个组件中都会用到 axios 发起数据请求，那么每个组件中都需要导入 axios，但是每次发请求都需要填写完整的请求路径，便不利于后期的维护，所以可以全局配置axios。

只需要在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios。

import { createApp } from 'vue'
// 导入axios
import axios from 'axios'

const app = createApp(App)

// 为axios配置请求根路径
axios.defaults.baseURL = 'https://api.com'
// 将axios挂载为app的全局自定义属性之后，每个组件可以通过this直接访问到全局挂载的自定义属性。
// app.config.globalProperties.为固定写法，$http是自定义属性名称。
app.config.globalProperties.$http = axios

app.mount('#app')

使用时只需要使用this.自定义属性名称加上请求方法。（get、post、head、put、delete等)

//用户列表组件users
this.$http.get('/users'）
//新闻资讯组件news
this.$http.get('/news'）