VSCode调试使用`vite-plugin-mock`写的Mock代码

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

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

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

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

export default defineConfig(({ command, mode } : ConfigEnv) : UserConfig => ({
  plugins: [
    viteMockServe({
      mockPath: 'mock',
      enable: mode === 'development'
    })
  ],
}))

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

import { MockMethod } from 'vite-plugin-mock'

const arUsers = [
  {
    userId: 1,
    username: 'admin',
    password: 'admin',
    token: 'admin'
  },
  {
    userId: 2,
    username: 'test',
    password: 'test',
    token: 'test'
  }
]

const arMock: MockMethod[] = [
  // 用户登录接口
  {
    url: '/api/user/login', //请求地址
    method: 'post', //请求方式
    response: ({ body }) => {
      console.log('登录', body)
      //获取请求体携带过来的用户名与密码
      const { username, password } = body
      //调用获取用户信息函数,用于判断是否有此用户
      const checkUser = global.arUsers.find(
        (item) => item.username === username && item.password === password
      )
      //没有用户返回失败信息
      if (!checkUser) {
        return { code: 201, message: '账号或者密码不正确' }
      }
      //如果有返回成功信息
      return { code: 200, data: { user: checkUser} }
    }
  }
]

export default arMock

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

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

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

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