React + Vite：用 Vite-plugin-mock 快速配置本地 Mock 服务

引言

在前端开发中，模拟 API 请求是提高开发效率的重要手段。通过使用 Vite 和 Vite-plugin-mock，我们可以在 React 项目中轻松配置一个本地 Mock 环境。这篇文章将详细介绍如何实现这一目标。

步骤 1：安装必要的依赖

首先，我们需要安装 vite-plugin-mock 和 mock.js。根据你使用的包管理工具，选择以下命令之一：

• 使用 npm:

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

• 使用 yarn:

  yarn add vite-plugin-mock mockjs --dev
  

• 使用 pnpm:

  pnpm add vite-plugin-mock mockjs --save-dev
  

步骤 2：配置 Vite

在项目的根目录下找到 vite.config.ts 文件，并添加以下配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { viteMockServe } from 'vite-plugin-mock';

export default defineConfig(({ command }) => ({
  ...
  plugins: [
    ....
    viteMockServe({
      mockPath: './mock/',
      localEnabled: command === 'serve', // 开发环境启用
      prodEnabled: command !== 'serve', // 生产环境启用
      supportTs: true, // 支持 TypeScript 文件
      watchFiles: true, // 监视文件更改
      injectCode: `
        import { setupProdMockServer } from './mockProdServer';
        setupProdMockServer();
      `,
    }),
  ],
}));

步骤 3：创建 Mock 数据

在项目根目录下创建一个 mock 文件夹，并在其中创建必要的文件。

1. 创建 common 文件夹并添加 Mock 数据

在 mock/common 文件夹中创建 mock-data.ts 文件：

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

// 定义模拟的请求处理程序
const dataAnalysisData: MockMethod[] = [
  {
    url: '/api/data', // 接口地址
    method: 'get', // 请求方式
    response: () => { // 模拟数据
      return {
        status_code: 0,
        status_msg: 'success',
        data: {
          // 模拟的数据
        },
      };
    },
  },
];

export default dataAnalysisData;

2. 创建 index.ts 文件

在 mock 文件夹中创建 index.ts 文件：

import dataAnalysisMock from './common/mock-data';

// 导出所有的 Mock 数据
export const worker = [...dataAnalysisMock];

步骤 4：配置生产环境的 Mock 服务

在 src 目录下创建 mockProdServer.ts 文件：

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';
import { worker } from '../mock/index';

// 设置生产环境的 Mock 服务
export const setupProdMockServer = () => {
  createProdMockServer([...worker]);
};

结论

通过以上步骤，已经成功在 React 项目中配置了一个本地 Mock 环境。这种配置不仅可以在开发过程中模拟 API 请求，提高开发效率，还可以在生产环境中进行数据模拟测试。

---