### 在 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 拦截器来统一处理请求和响应，例如
添加身份验证令牌或错误提示。
在使用Vue结合TypeScript进行开发时，作者遇到了在请求拦截器中无法正确获取配置参数的问题。经过排查，发现原因是将config参数错误地设置为any类型。这导致后续尝试读取特定属性时出现未定义的情况。文章强调了避免使用any类型的重要性，以减少潜在的类型错误。
扫一扫
912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
