vue3使用mockjs和axios

### 如何在 Vue3 中集成 Mock.js 和 Axios 进行数据模拟 为了实现 Vue3 项目中的接口数据模拟，可以利用 `Mock.js` 来拦截并伪造 HTTP 请求。以下是具体的实现方法： #### 安装依赖 首先，在项目中安装必要的依赖库： ```bash npm install axios mockjs --save-dev ``` #### 创建 Mock 数据文件 在项目的根目录下创建一个名为 `mock` 的文件夹，并在其内部定义用于模拟的数据文件。 例如，创建 `mock/api.js` 文件来模拟 `/user` 接口返回的数据： ```javascript // mock/api.js import Mock from 'mockjs'; const users = [ { id: 1, name: 'Alice', age: 25 }, { id: 2, name: 'Bob', age: 30 } ]; Mock.mock(/\/user/, { code: 200, message: 'Success', data: users[Math.floor(Math.random() * users.length)] }); Mock.mock(/\/list/, { code: 200, message: 'Success', data: users }); ``` 此部分通过正则表达式匹配 URL 并返回预设的 JSON 响应[^1]。 #### 配置 Webpack 或 Vite 支持 Mock 如果使用的是 Vite，则可以在其配置文件中启用 Mock 功能；如果是基于 Webpack 构建工具链的传统方式，则需手动设置代理规则。 对于 **Vite** 用户来说，修改 `vite.config.js` 添加如下代码片段即可完成自动加载 mocks： ```javascript // vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, './src') } }, server: { setupMiddleware(app) { app.use((req, res, next) => { require('./mock/index'); // 加载所有的 mock 路由 next(); }); } } }); ``` 而对于采用传统脚手架搭建的应用程序而言，可能需要额外编写中间件逻辑或者调整 devServer 设置以支持类似的机制[^3]。 #### 使用 Axios 发起请求 接着，在业务组件里调用这些被 mock 替代的服务端资源之前先初始化好全局实例化对象以便统一管理基础路径以及其他选项参数设定等工作流程操作步骤细节等内容描述省略不计... 下面展示了一个简单的例子说明如何结合两者一起工作: ```typescript // src/services/userService.ts import axios from 'axios'; const instance = axios.create({ baseURL: '/' }); export const getUserInfo = async () => await instance.get('/user'); export const getListData = async () => await instance.get('/list'); ``` 最后，在任何地方都可以轻松获取到已经经过伪装处理过的响应消息体啦！ --- ### 注意事项 当实际开发环境切换至生产模式时记得关闭本地服务层面上所做的更改以免影响线上正常运转情况哦😊 ---