想使用Go+Vue3来写一个后台管理系统，所以最近抽空研究学习了一下Vue3，由于是前后端分离开发的，前端使用Mock来模拟API及反馈。

笔者使用的是Vue3+Vite+TypeScript，所以要想使用Mock，需要在vite.config.ts中使用：

1import { viteMockServe } from 'vite-plugin-mock'

来导入vite-plugin-mock，然后根据模式来决定是否启用Mock，一般只有开发模式才启用Mock，正式的产品就应该使用后端数据：

1export default defineConfig(({ command, mode } : ConfigEnv) : UserConfig => ({
2  plugins: [
3    viteMockServe({
4      mockPath: 'mock',
5      enable: mode === 'development'
6    })
7  ],
8}))

通过上面的代码即可在项目根目录下创建一个mock目录，写需要模拟的API及相应的处理代码了。比如mock/user.ts：

 1import { MockMethod } from 'vite-plugin-mock'
 2
 3const arUsers = [
 4  {
 5    userId: 1,
 6    username: 'admin',
 7    password: 'admin',
 8    token: 'admin'
 9  },
10  {
11    userId: 2,
12    username: 'test',
13    password: 'test',
14    token: 'test'
15  }
16]
17
18const arMock: MockMethod[] = [
19  // 用户登录接口
20  {
21    url: '/api/user/login', //请求地址
22    method: 'post', //请求方式
23    response: ({ body }) => {
24      console.log('登录', body)
25      //获取请求体携带过来的用户名与密码
26      const { username, password } = body
27      //调用获取用户信息函数,用于判断是否有此用户
28      const checkUser = global.arUsers.find(
29        (item) => item.username === username && item.password === password
30      )
31      //没有用户返回失败信息
32      if (!checkUser) {
33        return { code: 201, message: '账号或者密码不正确' }
34      }
35      //如果有返回成功信息
36      return { code: 200, data: { user: checkUser} }
37    }
38  }
39]
40
41export default arMock

在这里插入图片描述

不过笔者遇到一个问题，前端的Vue代码都可以使用VSCode进行调试，但是Mock中response的代码不能直接打断点进行调试，可以看到，打的断点是灰色的。

这就需要在vite-plugin-mock/dist/index.mjs中，调用response的地方先打一个断点：

在这里插入图片描述

然后在调试时，单步进入即可调试Mock中的代码了：

在这里插入图片描述

只要调试时步进过该Mock文件，就可以打断点了，如果后面断点为灰了，可以再次这样操作即可。