vue vite请求后端

### 使用 Vite 和 Axios 在 Vue 项目中请求后端 API 在 Vue 项目中利用 Vite 构建工具以及 Axios 库来发起 HTTP 请求是一种常见做法。下面展示了一个完整的流程，包括配置 `vite.config.ts` 文件以处理跨域问题，并通过 Axios 发起 GET 请求。 #### 配置 Vite 开发服务器代理 为了简化开发过程中的跨源资源共享(CORS)问题，在 `vite.config.ts` 中可以设置代理规则： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), ], server: { port: 89, cors: true, proxy: { '/api': { target: 'http://192.168.16.90:8082', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, } }) ``` 这段代码设置了当访问 `/api` 路径下的资源时会转发到指定的目标地址上[^4]。 #### 创建 Axios 实例并封装通用请求方法 创建一个新的 JavaScript 或 TypeScript 文件用于定义 Axios 实例及其默认选项： ```javascript // src/utils/request.js or request.ts import axios from 'axios'; const service = axios.create({ baseURL: process.env.NODE_ENV === 'development' ? '/api' : '', // 根据环境变量切换baseURL timeout: 5000, // 设置超时时长 }); service.interceptors.request.use( config => { // 可在此处添加全局请求拦截器逻辑 return config; }, error => Promise.reject(error) ); service.interceptors.response.use( response => response.data, error => Promise.reject(error) ); export default service; ``` 此部分实现了对 Axios 的简单封装，便于后续维护和扩展功能。 #### 封装具体业务场景下的请求函数 针对不同类型的API接口分别编写对应的请求函数，这里给出获取用户列表的例子： ```javascript // src/api/userApi.js import request from '@/utils/request'; export function fetchUsers() { return request({ url: '/users', // 对应实际的API路径 method: 'GET', }); } ``` 上述代码展示了如何基于之前建立好的 Axios 实例进一步抽象出特定用途的方法[^2]。 #### 组件内调用 API 方法 最后一步是在组件内部使用这些已经准备好的 API 函数来进行数据交互操作： ```html <template> <div id="app"> <!-- 显示加载状态 --> {{ loading ? 'Loading...' : '' }} <!-- 渲染用户列表 --> <ul v-if="!loading && users.length > 0"> <li v-for="(user, index) in users" :key="index">{{ user.name }}</li> </ul> <!-- 错误提示信息 --> <p v-if="error">{{ error.message }}</p> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { fetchUsers } from './api/userApi'; let loading = ref(true); let users = ref([]); let error = ref(null); onMounted(async () => { try { const result = await fetchUsers(); users.value = result.users || []; } catch (err) { error.value = err; } finally { loading.value = false; } }); </script> ``` 以上就是整个过程中涉及到的主要步骤和技术要点[^1]。