vue項目配置Mock.js

扯在前面

最近一直在忙跳槽的事情，博客也好久沒有更新了，上次更新還是去年，不出意外的話，從今天起繼續今年的博客之旅。

今天繼續完善我之前的項目架構，從零開始搭建vue移動端項目到上線，有需要的同學可以看下，方便的話，順便給個star！

大部分時候，當一個項目開始研發，后台接口開發是沒有前端頁面開發快的；這就導致一個問題，那就是前端頁面都快要寫好了，由於接口進度慢，前后端無法聯調，如果等到接口開發完了再進行聯調，往往又會耗費很長時間；為了解決這個問題，前端可以根據接口文檔先在前端模擬數據進行請求，這樣當最后接口開發好的時候，直接使用后台真實數據就行了，這樣做大大節省了開發時間，可以留更多的時間來進行自測。

本次使用mock.js作為Mock數據的庫，來實現在vue項目中使用mock數據進行開發的配置。

1、在開發環境中引入mock.js以來

npm install mockjs --save-dev

2、新建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  // 返回模擬數據
})

3、在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

4、測試

此處以登陸接口為例，當進行登陸請求的時候console.log結果如下，並且當前Network為空

以上就是mock數據的過程，當然mock.js還有許多配置，具體可以看官方文檔；項目詳細代碼示例點擊這里，如果感覺對你有用的話請給個👍。