安装 mock

Mock数据是在本地开发环境中模拟后端API响应的一种常用方法。使用Mock数据可以加速开发流程,无需等待后端API的实现。

步骤 1：安装 Mock 插件和 Mockjs

在你的项目中安装 vite-plugin-mock 和 mockjs：

1pnpm i -D vite-plugin-mock mockjs

步骤 2：在 vite.config.ts 中配置 Mock 插件

在 Vite 的配置文件中启用 Mock 插件：

1import { defineConfig } from 'vite'
2import { viteMockServe } from 'vite-plugin-mock'
3// https://vite.dev/config/
4export default defineConfig(({ command }) => {
5  return {
6    plugins: [
7      viteMockServe({
8        mockPath: 'mock',
9        enable: true
10      })
11    ],
12  }
13})

步骤 3：创建 Mock 数据和接口

在项目根目录下创建一个 mock 文件夹,并在其中创建数据和接口文件。例如,创建一个 user.ts 文件：

1function createUserList() {
2  return [
3    {
4      id: 1,
5      username: 'dancy',
6      password: '123123',
7      token: 'asdfghjkl'
8    }
9  ]
10}
11
12// 对外暴露一个数组：数组里面包含接口
13export default [
14  {
15    url: '/api/user/login',
16    method: 'post',
17    response: ({body}) => {
18      // 获取请求体携带过来的用户名和密码
19      const { username, password } = body;
20      
21      // mock逻辑
22      const checkUser = createUserList().find((item)=> item.username === username && item.password === password)
23      
24      if(!checkUser) {
25        return {
26          code: 201,
27          data: {
28            message: '账号或密码不正确'
29          }
30        }
31      }
32      
33      // 如果有返回成功信息
34      const { token } = checkUser
35      
36      return {
37        code: 200,
38        data: { token }
39      }
40    }
41  }
42]

步骤 4：使用 Axios 测试接口

最后,使用 Axios 来测试你的 Mock 接口：

1import axios from 'axios'
2
3axios({
4  url: '/api/user/login',
5  method: 'post',
6  data: {
7    username: 'dancy',
8    password: '123123'
9  }
10})

安装 mock#

安装 mock