前端 mock server 构建前言 mock 翻译过来是模拟，mock 数据就是模拟数据。场景是前后端并行开发时，后

前言

mock 翻译过来是模拟，mock 数据就是模拟数据。场景是前后端并行开发时，后端接口没有完成开发，前端先进行假数据模拟，等后端接口开发完成再进行联调。自从前后端分离以来，mock 数据就变得必须了，前端的各种 mock 方案也层出不穷。

现有方案

node 起服务

json-server 起一个 node 服务，指定 json 作为 mock 数据来源。

优点是是用起来挺简单的，缺点也很明显，协作并不友好，除了起前端服务开发前端代码还要启动 mock 服务，多起一个服务，短时间可能不觉得有啥，但对于团队协作来说就会感到非常麻烦。

mock 平台

yapi 这类平台，优点是敦促后端写接口文档，前端直接可以看文档请求来写代码，修改协作方便，但缺点也很明显，需要打开浏览器打开页面，并且还要维护各种链接映射，对于前端来说，不想多打开多余的页面，复制来复制去，所以还是麻烦。

请求拦截

Mock.js这类是对请求进行拦截，返回模拟数据，有点是不需要修改代码可以拦截ajax请求返回mock数据。

这些方案都各有优缺点，最终来说，简单易用才是王道，有些太过复杂。除了实现 mock 数据代理，同时也要实现线上数据代理。不仅仅是假数据，现实中更多的是要排查线上问题。有些方式比如Charles等代理工具配置，每次又都要启动和配置，还是太麻烦，最好的方案其实是所有的功能都集成在项目命令行里，例如所有开发都用 npm run dev 一个命令同步启动 mock 和前端服务，代理到mock数据，直接用假数据开发功能。

如何实现

要想有各个方案的优点，竭力避免某些致命缺点，首先要解决的是，配置不能太多，并且在项目开始之初就配置完好，后续开发不需要关心任何配置只需要按规则来添加json文件来进行本地开发即可。其次是 mock 和线上代码一致，mock 不能侵入代码。最重要的就是简单易用，解决假数据和线上真数据的代理问题。

其实是要结合已有的方案来看，可以结合各个方案来实现一个插件配置来解决问题。对请求进行拦截，按照规则代理到本地的 mock 文件夹。可能会有人更喜欢其他方式，但对我而言，虽然这个方案会在本地写一堆 json，但是这堆 json 假数据实际上并未侵入代码，而是作为独立文件夹来存在的，提交到 git 也可没关系，方便协作。而且主要是解决了开启多个服务或者开启页面切换来写代码这种问题，让写代码变得更纯粹更简单一些。

对于 webpack/vite/vue 写了一个插件 vite-plugin-easy-mock 来实现，实际也是借鉴 Mock.js 的这种拦截请求来实现。

使用 `vite-plugin-easy-mock`

只需要 vue.config.js 或者 webpack-dev-server 配置或 vite.config.js 中加载，然后按照规则即可使用mock数据，开启本地服务器则自动代理mock数据（可根据环境判断是否需要加载该插件），不需要开启额外的服务器。

安装

yarn add vite-plugin-easy-mock --dev
# or
npm i vite-plugin-easy-mock --save-dev

使用

vite.config.js 中使用插件

import { defineConfig } from 'vite' 
import viteMock from 'vite-plugin-easy-mock' 
export default defineConfig({ 
     plugins: [ viteMock() ] 
})

vue.config.js 中使用

const { useMiddleWare } = require('vite-plugin-easy-mock')

module.exports = {
  devServer: {
    before (app) {
      // 使用mock中间件
      app.use(useMiddleWare())
    }
  },
}

根目录下新建 mock 文件夹，新建文件夹和 json 或者 js 文件文件夹和文件名配合就能 mock 本地 /user/getAuthList 接口，json 和 js 写法如下： mock/user/getAuthList.json

{
  "success": true,
  "desc": null,
  "data": []
}

mock/user/getAuthList.js

module.export = () => {
  return {
    success: true,
    desc: null,
    data: []
  }
}

该插件仅提供了一种 mock 数据的方案，不使用插件自己也可在项目中用这种方式来定制需求。至于选择哪种方案最终还是要视项目需求而定~

前端 mock server 构建

前言