vite-plugin-mock配置

vite-plugin-mock是一个用于Vite的Mock插件，可以在开发过程中使用虚拟数据进行调试和测试。它可以模拟接口返回数据，支持动态生成数据。下面是vite-plugin-mock的配置示例：

// vite.config.js
import { defineConfig } from 'vite'
import mockPlugin from 'vite-plugin-mock'

export default defineConfig({
  plugins: [
    mockPlugin({
      // mock配置
      mockPath: 'mock',
      supportTs: true,
      injectCode: `
        import Mock from 'mockjs';
        Mock.mock('/api/user', {
          'name': '@cname',
          'age|1-100': 100,
          'gender|1': ['男', '女', '保密']
        });
      `
    })
  ]
})

上面的配置中，mockPath指定了mock文件夹的路径，supportTs表示是否支持TypeScript，injectCode为注入代码，在这里我们使用Mock.js模拟了一个接口`/api/user`返回的数据。

在mock文件夹中，我们可以创建一个`.ts`或`.js`文件，用于存放各种接口的模拟数据。例如，我们可以在mock文件夹下创建一个`user.ts`文件，用于模拟`/api/user`接口的返回数据：

// mock/user.ts
import { MockMethod } from 'vite-plugin-mock';
import Mock from 'mockjs';

export default [
  {
    url: '/api/user',
    method: 'get',
    response: () => {
      return Mock.mock({
        'name': '@cname',
        'age|1-100': 100,
        'gender|1': ['男', '女', '保密']
      })
    }
  }
] as MockMethod[]

这里我们使用`Mock.mock`方法生成了随机数据，并返回给接口调用者。

最后，在应用中发起请求时，只需要使用该插件模拟的接口路径即可，例如：

// main.js
fetch('/api/user').then(res => res.json()).then(data => {
  console.log(data)
})

这样，在开发过程中就可以使用虚拟数据进行调试和测试了。