在https://www.jb51.net/article/151520.htm's的文章中，我们介绍了在Angular-CLI中引入简单模拟的方法。

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

本质上，本文介绍了在webpack-dev-server中配置simple-mock来实现API Mock，因此它适用于任何采用webpack的前端项目。

1简单模拟简介

Simple-Mock是一个简单的API Mcok库，为节点Server提供API方法调用，帮助节点Server实现Mock功能。

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

Simple-mock通过提供API方法实现简单的API Mock逻辑，侧重于快速性和简洁性。

2在Vue-CLI项目中使用简单模拟

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

2.1在项目中引入简单模拟依赖

NPMI-D @ lzwme/simple-mock # oryrarnadd-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粉笔=require('粉笔')；const ProxyTarget=' https://API . github.com/'；module.exports={ baseUrl: ' '，//links : https://webpack.js.org/configuration/dev-server/开发服务器： { open: true，https: false，compress: true，disableHostCheck: true，//links : https://github.com/chimurai/http-proxy-middleware代理： { '/users ' : { target 3: proxyTarget，changeOrigin: true，port: 3009，onProxyRes}，async onproxyreq (proxyreq，req，RES){//尝试将post请求参数解码为req.body if(！req . body proxyreq . getheader(' content-type '){ try { req . body=wait any parse({ req })；} catch(err){//console . log(err)；} } apiMock.render(req，res)。然后(isMocked={ if(！isMocked) { console.log(粉笔.青色('[apiProxy]')，req。_parsedUrl.pathname，' t '，粉笔.黄色(ProxyTarget))；} });} } } }};通过以上两个步骤，简单模拟的介绍就完成了。以下步骤主要是简单模拟的示例。

2.3修改简单模拟配置文件

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

module . exports={ mock file dir : ' mock '，//path . content love(_ dirname，' mock ')，//指定存储mock文件的目录isenablemoc3360true。//是否开启Mock API函数isAutoSaveApi: true，//是否自动保存远程请求的API isforcesaveapi3360 false，//是否强制保存，否则本地有时不会保存。//当API返回的内容自动保存时，过滤内容的方法，返回true时保存fnautosavefilter(content){//示例：如果(！content | | content . message===' Not Found '){返回false}返回true}};通过修改配置文件中的开关，可以打开或关闭模拟功能。

2.4通过环境变量打开或关闭Mock函数

simple-mock除了读取配置文件外，还可以通过读取环境变量来判断mock的开启或关闭(环境变量优先级更高，便于将开关注入工程工具)。

例如，在window下，我们可以创建以下批处理脚本(dev-start.bat)，并启动脚本来选择是否立即打开mock函数。

dev-start.bat文件的主要内容参考：

% 40标题% 20视图-开始-帮助器% 40回声% 20偏移量% 20 node _ env % 3d开发人员% 20模拟API _ enable % 3 dnset % 20模拟API _ auto save % 3 dnset % 20模拟API _ auto save _ force % 3 dnset % 20% 2 FP % 20启用模拟% 3 denable % 20模拟API % 3f % 28y % 2f % 293360如果% 20% 27% 25启用模拟% 25% 3d % 27%