mockjs在vue项目中的使用，不影响测试环境和生产环境

mockjs在项目中的使用

现状：

后台管理系统中，前后端进度可能会出现不一致的情况，前端的许多开发需要依赖后端接口开发的完成，这样就会造成前端的被动状态，会造成迭代前期前端时间充裕，迭代后期前端时间比较紧张（联调时间基本都在前端）

目的：

让迭代更顺畅，解决前后端进度不一致的情况，解决前端必须依赖后台接口的完成才去开发的现状。不影响现有代码

具体实现：

1. 为什么使用mockjs

也许想通过json文件去模拟后台接口的数据，但是获取到的数据是固定的，而且很局限，增删改的接口怎么去实现？

Mockjs是一款前端开发中拦截Ajax请求再生成随机数据响应的工具，可以用来模拟服务器响应。优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

1. 实现思路

规则：

（1）：只在本地可用、不影响线上

（2）：尽可能少的改动

（3）：使用方便

Vue中根据NODE_ENV来区分测试环境和生产环境，测试环境的值为development，生产环境的值为production。看package.json中scripts里面，有启动dev的命令，有启动build的命令，那我们可以加一个启动mock的命令呢？答案当然是可以的。
我们在scripts中添加"mock": "cross-env NODE_ENV=mock npm run dev"，这就意味着当我们执行npm run mock时，先把NODE_ENV的值变为了mock，然后再走npm run dev的相关操作。

根据"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",此行代码可知，run dev时候其实加载的是build下面的webpack.dev.conf.js,在此js中，有引入config中的dev.env.js。

打开dev.env.js，会发现NODE_ENV:  '"development"'有这么一行，就是把development赋值给NODE_ENV，所以此处咱们要做个调整，咱们需要根据先有的NODE_ENV的值去判断，当现有的NODE_ENV的值为mock时候，则NODE_ENV的值继续为mock,否则为development。所以那一行改为：NODE_ENV: process.env.NODE_ENV == 'mock' ? '"mock"' : '"development"'

 

项目中本地环境使用mockjs，肯定需要安装mockjs。执行：npm install mockjs --save-dev ,package.json中出现mockjs的版本号信息等，然后我们在src目录下创办mock目录，在mock目录下创建index.js文件，可根据MOCK.mock(url,method,data)创建相关的请求，此处的url建议是正则，以mock开头，mock/xxx 和rest/xxx的保持一致

在main.js中引入mock，根据判断NODE_ENV的值，来决定是否加载mock。

 

最后一步：打开接口地址的管理页面，把const BASEHTTP = 'rest'改为

const BASEHTTP = process.env.NODE_ENV === 'mock' ? '/mock' : 'rest'。

Mock/index.js如图

 

Mock/response/user.js如图

 

接口地址页面如图：