vue项目配置Mock.js

扯在前面

最近一直在忙跳槽的事情，博客也很久没有更新了，上次更新仍是去年，不出意外的话，从今天起继续今年的博客之旅。

今天继续完善我以前的项目架构，从零开始搭建vue移动端项目到上线，有须要的同窗能够看下，方便的话，顺便给个star！

大部分时候，当一个项目开始研发，后台接口开发是没有前端页面开发快的；这就致使一个问题，那就是前端页面都快要写好了，因为接口进度慢，先后端没法联调，若是等到接口开发完了再进行联调，每每又会耗费很长时间；为了解决这个问题，前端能够根据接口文档先在前端模拟数据进行请求，这样当最后接口开发好的时候，直接使用后台真实数据就好了，这样作大大节省了开发时间，能够留更多的时间来进行自测。

本次使用mock.js做为Mock数据的库，来实如今vue项目中使用mock数据进行开发的配置。

一、在开发环境中引入mock.js以来

npm install mockjs --save-dev

二、新建mock文件夹，用于存放mock数据，并新建index.js和相关部分mock数据模板

此处以user模块为例，user.js文件以下

let userInfo = {
  code: 200,
  id: '123456',
  msg: 'success',
  name: 'gs',
  tel: '12306'
}
let user = {
  userInfo
}
export default user

在index.js里引入mock.js和user.js

/*
 * @Description: 引入mock.js及配置文件
 * @Author: MrGao
 * @LastEditors: Please set LastEditors
 * @Date: 2019-03-12 10:35:08
 * @LastEditTime: 2019-03-12 10:54:20
 */

import Mock from 'mockjs'
import User from './user'

Mock.mock('/root/login/checkMemberLogin', 'post', () => {  // 此处会劫持/root/login/checkMemberLogin接口，并返回数据
  return User.userInfo  // 返回模拟数据
})

三、在main.js中引入mock文件夹中的index.js

if (process.env.MOCK) {    // 判断是否为mock模式
  require('./mock/index.js')
}

这里判断当前启动是否为mock模式，当启动模式为npm run dev:mock的时候引入index.js，其余状况则不引入index.js；具体配置可项目代码：https://github.com/MrKaKaluote/vue-mobile

四、测试

此处以登录接口为例，当进行登录请求的时候console.log结果以下，而且当前Network为空

以上就是mock数据的过程，固然mock.js还有许多配置，具体能够看官方文档；项目详细代码示例点击这里，若是感受对你有用的话请给个👍。