补充：mockJs 调整

前言

前面通过直接引入整合了 Axios + MockJs ，虽然可以快速生成想要的接口数据，但是使用的过程中发现，在浏览器调试的时候并没有发出真正的请求，想要看到请求结果和数据只能通过，打印到控制台才可以，这样很不方便，查了一下资料，是因为 MockJs 拦截了真正的请求，直接返回了请求结果，所以不肯有请求的。查阅了一些资料，也踩了很多坑，最后找了一款插件，算是可以满足我的需求了。vite-plugin-mock，想深入了解可看官方文档：github.com/vbenjs/vite…

安装插件 vite-plugin-mock

npm i  mockjs vite-plugin-mock -D

vite.config.ts 配置

// vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    // 添加 vite-plugin-mock 插件
    viteMockServe({
      // mock 数据文件所在的目录
      mockPath: './src/mock',
      watchFiles: false,
      enable: true,
      logger: true
    }),
  ]
})

修改 mock 文件夹下的文件

将之前的全部删除，然后创建 user.ts 存放用户相关的接口

// user.ts
import type { Token } from '@/types/data'
import type { LoginData, UserInfo } from '@/types/user'

type Req<T> = {
  url: string
  body: T
  query: Record<string, never>
  headers: {
    [key: string]: string
    host: string
    connection: string
    origin: string
    'sec-fetch-site': string
    'sec-fetch-mode': string
    'sec-fetch-dest': string
    referer: string
    'accept-encoding': string
    'accept-language': string
  }

}

export default [

  // 用户登录
  {
    url: '/api/login',
    method: 'POST',
    response: (req: Req<LoginData>) => {
      const { username, password } = req.body

      if (username === 'admin' && password === 'admin123') {
        return {
          code: 20000,
          success: true,
          message: '请求成功。',
          data: <Token>{
            accessToken:"123safsfw35345241223"
          }
        }
      } else {
        return {
          code: 50000,
          success: true,
          message: '用户名或密码错误。',
          data: {}
        }
      }
    }
  }
]

注意 注意 注意

这里有个坑，当你完成上面的整合后会发现 mock 文件夹下会生成很多，xxx.mjs 文件，这个是插件的 bug, 有两种方式，第一种降版本，第二种设置 watchFiles: false,可以跟踪看这个issue： github.com/vbenjs/vite…

调试

这个时候就可以像真实请求一样查看请求参数，请求结果了。