vite-plugin-mock怎么配置

vite-plugin-mock 是 Vite 中用于 mock 数据的插件，可以通过配置来实现 mock 数据的自定义。

首先需要安装 vite-plugin-mock：

npm install vite-plugin-mock --save-dev

然后在 `vite.config.js` 中引入插件并进行配置：

import { defineConfig } from 'vite';
import path from 'path';
import { createMockMiddleware } from 'vite-plugin-mock';

export default defineConfig({
  // 其他配置...
  plugins: [
    createMockMiddleware({
      mockPath: 'mock', // mock 文件所在的目录
      watchFiles: true, // 是否监听文件变化
      localEnabled: true, // 是否启用本地 mock，开启后会优先查找 mock 文件夹中的文件
      prodEnabled: false, // 是否启用生产环境 mock，开启后会在生产环境中使用 mock 数据
      injectCode: `
        import { setupMock } from './mock/setup';
        setupMock();
      `, // 注入代码，可以自定义 mock 的初始化操作
    }),
  ],
});

上面的配置中，我们指定了 mock 文件所在的目录为 `mock`，并启用了本地 mock，但禁用了生产环境的 mock。在 `injectCode` 中，我们引入了一个 `setupMock` 方法来初始化 mock 数据，这个方法可以根据自己的需要进行编写。

在 `mock` 目录下可以创建各种 `.js`、`.ts` 等文件来编写 mock 数据，比如：

// mock/user.js
export default {
  'GET /api/user': { id: 1, name: '张三' },
  'POST /api/user': (req, res) => {
    const { name } = req.body;
    res.send({ id: 2, name });
  },
};

上面的代码中，我们模拟了一个用户信息的 API，可以通过 GET 请求获取用户信息，也可以通过 POST 请求修改用户信息。

最后需要注意的是，vite-plugin-mock 只能用于 mock 接口数据，无法模拟前端的行为，比如点击事件等。如果需要模拟前端行为，可以考虑使用 Jest、Cypress 等测试框架。