vue3配置全局封装axios属性

在Vue3中，可以通过创建一个axios实例并将其挂载到Vue实例的原型链上来实现全局封装axios属性。具体步骤如下： 1. 安装axios和@vue/composition-api模块： ```bash npm install axios @vue/composition-api ``` 2. 在main.js文件中引入@vue/composition-api模块，并创建一个axios实例： ```javascript import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import axios from 'axios' import { provide } from '@vue/composition-api' const app = createApp(App) const pinia = createPinia() const axiosInstance = axios.create({ baseURL: 'http://localhost:3000', // 设置axios请求的基础URL timeout: 5000, // 设置请求超时时间 }) app.config.globalProperties.$axios = axiosInstance // 将axios实例挂载到Vue实例的原型链上 provide('axios', axiosInstance) // 将axios实例挂载到Composition API的provide函数上 app.use(pinia) app.mount('#app') ``` 3. 在组件中使用axios： ```javascript import { useAxios } from '@vue/composition-api' export default { setup() { const axiosInstance = useAxios() axiosInstance.get('/api/users') .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) return {} } } ``` 在组件中使用`useAxios`函数从Composition API中获取axios实例，然后就可以像平常一样使用axios进行网络请求了。