背景

在项目开发过程中时常会遇到这样一种情况，需求下来以后，前后端并行开发，后端写接口，前端写页面，那么就面对一个问题，前端页面中的数据来自后台，后端接口与前端一样都处于开发中，所以前后端约定好数据结构并行开发，对于前端而言，数据结构是死数据不能模拟真实情况，于是就有了 mock 服务

mock 服务的作用

前后端分离并行开发，模拟后端接口服务

构建 mock 服务

分为两部分讲解：

Vue 搭建 mock 服务
React 搭建 mock 服务

安装 mock-service-plugin 插件

无论 Vue 项目或是 React 项目第一步都需要安装 mock-service-plugin 插件

npm i mock-service-plugin --save-dev

Vue 构建 mock 服务

安装（上面有）

配置 mock-service-plugin

// vue.config.js 

const MockServiceWbepack = require('mock-service-webpack');
module.exports = {
	configureWebpack: {
		plugins: [
			// 初始化插件
	        new MockServiceWbepack({
	          path: path.join(__dirname, './mocks'), // mock数据存放在 mocks 文件夹中
	          port: 9090 // 服务端口号
	        })
    	]	
    }
}

项目根目录下创建 mock 数据文件夹 mocks
在mocks文件夹下创建一个data.json文件
添加如下数据
@url 接口路径
说明： www.example.com/getUser 以获取用户信息接口为例，我们通常会把www.example.com作为 baseUrl ,getUser作为接口名称，在data.json文件文件中的 /login就相当于getUser,
头部注释中的 @url 字段是必须的，mock 服务会遍历mocks文件夹下所有的.json文件,当请求发送到 mock 服务上时就会根据 @url 中的字段匹配请求并返回数据

/**
 * @url /login
 */
{
	"code": 404,
	"data|5-10": [
		{
			"name": "@cname",
			"id": "@guid",
			"email": "@email"
		}
	],
	"message": "success"
}