导入vue-axios

### 在 Vite + Vue 项目中配置和导入 vue-axios 的方法 在 Vite + Vue 项目中使用 `vue-axios`，可以通过以下方式完成配置和导入。以下是详细的实现方法： #### 安装依赖 首先需要安装 `axios` 和 `vue-axios` 作为项目的依赖项： ```bash npm install axios vue-axios ``` #### 配置 Axios 创建一个专门用于封装 Axios 的文件，例如 `src/api/axiosInstance.js`，并在其中定义 Axios 实例： ```javascript import axios from 'axios'; const axiosInstance = axios.create({ baseURL: 'https://api.example.com', // 设置基础 URL timeout: 5000, // 请求超时时间 }); export default axiosInstance; ``` #### 在主入口文件中引入和配置 在项目的主入口文件（如 `src/main.js` 或 `src/main.ts`）中引入并使用 `vue-axios` 插件： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import axios from 'axios'; import VueAxios from 'vue-axios'; const app = createApp(App); // 引入自定义的 Axios 实例 import axiosInstance from './api/axiosInstance'; // 使用 vue-axios 插件，并传入自定义实例 app.use(VueAxios, axiosInstance); app.mount('#app'); ``` #### 在组件中使用 Axios 在 Vue 组件中可以直接通过 `this.axios` 调用 Axios 方法[^2]。例如，在某个组件中发起 GET 请求： ```html <template> <div> <button @click="fetchData">获取数据</button> <pre>{{ result }}</pre> </div> </template> <script> export default { data() { return { result: null, }; }, methods: { fetchData() { this.axios.get('/endpoint') // 使用 this.axios 发起请求 .then((response) => { this.result = response.data; }) .catch((error) => { console.error('请求失败:', error); }); }, }, }; </script> ``` #### 替代方案：直接使用 Axios 如果不需要 `vue-axios` 提供的全局插件功能，也可以直接在组件中导入 Axios 实例并使用。这种方式更加轻量且灵活： ```html <template> <div> <button @click="fetchData">获取数据</button> <pre>{{ result }}</pre> </div> </template> <script> import axiosInstance from '@/api/axiosInstance'; // 直接导入 Axios 实例 export default { data() { return { result: null, }; }, methods: { fetchData() { axiosInstance.get('/endpoint') // 使用导入的 Axios 实例 .then((response) => { this.result = response.data; }) .catch((error) => { console.error('请求失败:', error); }); }, }, }; </script> ``` 这种替代方案避免了 `vue-axios` 的额外开销，同时保留了 Axios 的全部功能。 #### Vite 配置调整 如果需要对 Axios 请求路径进行别名映射，可以在 `vite.config.ts` 中添加路径解析配置[^1]： ```typescript import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { fileURLToPath, URL } from 'node:url'; export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), '@/api': fileURLToPath(new URL('./src/api', import.meta.url)), // 添加 API 别名 }, }, }); ``` ### 注意事项 - 如果项目中已经集成了 TypeScript，则需要为 Axios 添加类型声明以获得更好的开发体验。 - 在生产环境中，建议配置 Axios 拦截器来统一处理请求和响应，例如添加身份验证令牌或错误提示。