在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟

在 https://www.jb51.net/article/151520.htm这篇文章中，我们介绍了在 Angular-CLI 中引入 simple-mock 的方法。

本文以 Vue-CLI 为例介绍引入 simple-mock 实现前端开发数据模拟的步骤。

本质上这里介绍的是在 webpack-dev-server 中配置 simple-mock 实现 API Mock，所以适用于任何采用 webpack 的前端项目。

1 simple-mock 简介

simple-mock 是一个引入成本简单的 API Mcok 库，通过提供 API 方法供 node Server 调用，以帮助 node Server 实现 Mock 功能。

前端开发过程中的 API Mock 方案各种各样，但有时功能丰富的 mock 方案不一定是最适合当前开发场景的。

simple-mock 以提供 API 方法的方式实现简易的 API Mock 逻辑， 注重快速简洁。

2 在 Vue-CLI 项目中使用 simple-mock

下面以当前最新的 Vue-CLI 3 和 vuejs 2 为例，介绍引入 simple-mock 的详细流程。

2.1 在 项目中引入 simple-mock 依赖

npm i -D @lzwme/simple-mock
# or
yarn add -D @lzwme/simple-mock

2.2 在配置文件 vue.config.js 中增加代理配置项

在配置文件 vue.config.js 中增加 devServe.proxy 字段的配置。参考：

const anyParse = require("co-body");
const apiMock = require("@lzwme/simple-mock");
const chalk = require("chalk");
const proxyTarget = 'https://api.github.com/';
module.exports = {
 baseUrl: "",
 // Links: https://webpack.js.org/configuration/dev-server/
 devServer: {
 open: true,
 https: false,
 compress: true,
 disableHostCheck: true,
 // Links: https://github.com/chimurai/http-proxy-middleware
 proxy: {
 "/users": {
 target: proxyTarget,
 changeOrigin: true,
 port: 3009,
 onProxyRes(proxyRes, req, res) {
  apiMock.saveApi(req, res, proxyRes.headers["content-encoding"]);
 },
 async onProxyReq(proxyReq, req, res) {
  // 尝试解码 post 请求参数至 req.body
  if (!req.body && proxyReq.getHeader("content-type")) {
  try {
  req.body = await anyParse({ req });
  } catch (err) {
  // console.log(err);
  }
  }
  apiMock.render(req, res).then(isMocked => {
  if (!isMocked) {
  console.log(
  chalk.cyan("[apiProxy]"),
  req._parsedUrl.pathname,
  "t",
  chalk.yellow(proxyTarget)
  );
  }
  });
 }
 }
 }
 }
};

通过以上两个步骤，即完成了 simple-mock 的引入。下面步骤主要是针对 simple-mock 使用的说明示例。

2.3 修改 simple-mock 配置文件

simple-mock 可以通过读取配置文件 simple-mock-config.js 判断 mock 的开启或关闭。该文件会在首次加载时自动创建。配置内容参考：

								 
 1/3    1 2 3 下一页 尾页