接口 Mock 工具对比：Mock.js、Easy Mock、Apifox 的使用场景与配置

fruge365

发布于 2025-12-15 13:58:01

3220

接口 Mock 工具对比：Mock.js、Easy Mock、Apifox 的使用场景与配置

为什么需要接口 Mock

前端开发中，后端未就绪、接口不稳定或联调周期长，都会拖慢交付。接口 Mock 能在“接口契约可用、数据可控”的前提下并行开发、回归测试与演示。选型关键在于：是否需要接口管理与协作、是否需要可视化平台、是否要与 API 设计/测试集成。

工具速览

Mock.js：前端/Node 端轻量数据生成库，快速造数与拦截请求，适合单人或小团队快速原型。
Easy Mock：基于 Web 的接口 Mock 平台，支持项目/接口管理与规则配置，适合需要简单平台化的团队或内网部署。
Apifox：集 API 设计、文档、Mock、测试于一体，自动从接口定义生成 Mock，适合中大型团队协作与质量闭环。

Mock.js：轻量造数与本地拦截

适用场景：本地快速原型、组件演示、与 Vite/Webpack dev server 集成拦截；不依赖后端。
安装与使用：

npm i -D mockjs

前端拦截示例（XHR/Fetch）：

import Mock from 'mockjs'

Mock.mock('/api/user', 'get', {
  code: 0,
  'data|1': [{
    id: '@id',
    name: '@cname',
    avatar: '@image(64x64)',
    age: '@integer(18,40)'
  }]
})

Mock.mock(/\/api\/list\?page=\d+/, 'get', {
  code: 0,
  'list|10': [{ id: '@id', title: '@ctitle(5,15)', date: '@date' }]
})

Dev Server 路由拦截（以 Vite 为例）：

// vite.config.ts 片段
import { defineConfig } from 'vite'
import Mock from 'mockjs'

export default defineConfig({
  server: {
    middlewareMode: true,
    setup: ({ middlewares }) => {
      middlewares.use('/api/user', (req, res) => {
        const data = Mock.mock({ code: 0, data: { id: '@id', name: '@cname' } })
        res.setHeader('Content-Type', 'application/json')
        res.end(JSON.stringify(data))
      })
    }
  }
})

优点与注意：极快、零门槛；但不提供接口管理与团队协作，Mock 与契约需自行维护。

Easy Mock：平台化接口管理

适用场景：需要页面化管理接口、多人协作与共享 Mock 地址；可选私有部署。
基本使用流程：
- 创建项目 → 新建接口（路径、方法、返回示例） → 配置规则（随机、范围、枚举） → 获取 Mock 基础地址。
- 组织地址通常形如：https://mock.example.com/mock/{projectId}/{namespace}。
前端接入（切换 baseURL）：

import axios from 'axios'

const isMock = import.meta.env.VITE_USE_MOCK === 'true'
const baseURL = isMock
  ? 'https://mock.example.com/mock/12345/app'
  : 'https://api.example.com'

export const http = axios.create({ baseURL })

数据规则示例：

{
  "code": 0,
  "list|10": [
    { "id": "@id", "title": "@ctitle(5,10)", "status|1": ["open","closed"] }
  ]
}

优点与注意：接口集中管理、便于分享与演示；平台稳定性与权限管理需关注，规则语法通常与 Mock.js 相近。

Apifox：设计/文档/Mock/测试一体化

适用场景：需要从接口定义自动生成 Mock、联动用例测试、生成文档与 SDK；团队协作与质量闭环。
基本使用流程：
- 在 Apifox 定义接口（路径、方法、入参、响应 Schema）与示例；开启自动 Mock。
- 获取 Mock 地址：云端通常形如 https://api.apifox.cn/m1/{projectId}，也可启动本地 Mock 服务。
- 维护环境（开发/测试/生产），切换 baseURL 与鉴权变量。
前端接入：

import axios from 'axios'

const env = import.meta.env.MODE // dev/test/prod
const endpoints = {
  dev: 'https://api.apifox.cn/m1/98765',
  test: 'https://test.api.example.com',
  prod: 'https://api.example.com'
}

export const http = axios.create({ baseURL: endpoints[env] })

从 Schema 自动生成 Mock：
- 为响应字段设置规则（长度、范围、枚举、格式），可一键生成示例与 Mock 数据。
- 用例测试可直接引用 Mock 数据，联动断言与 CI。
优点与注意：强协作、自动 Mock 与测试闭环；团队需采纳统一接口定义流程，Mock 与真实后端差异需定期校准。

选型与实践建议

单人/原型：Mock.js 速度最快，代码内就地拦截，适合组件演示与快速迭代。
团队/演示：Easy Mock 提供可分享的 Mock 地址，接口管理更直观，适合轻量协作。
中大型团队/质量：Apifox 将接口定义、文档、Mock 与测试打通，减少偏差与重复劳动。
最佳实践：
- 以接口契约为源（OpenAPI/Apifox 定义），将 Mock 视为契约的派生物而非手写数据。
- 用环境变量切换 Mock 与真实后端，不要在业务层到处写条件判断。
- 将关键接口的 Mock 数据纳入回归测试集，避免“演示可用、集成不稳”。
- 定期校准 Mock 与真实后端响应，变更需走评审与版本管理。

示例：前端项目的环境切换与联调

# .env.dev
VITE_USE_MOCK=true
VITE_API_BASE=https://api.apifox.cn/m1/98765

# .env.prod
VITE_USE_MOCK=false
VITE_API_BASE=https://api.example.com

// src/http.ts
import axios from 'axios'

const http = axios.create({ baseURL: import.meta.env.VITE_API_BASE })

http.interceptors.response.use(
  (res) => res.data,
  (err) => Promise.reject(err)
)

export default http