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還有許多配置，具體能夠看官方文檔；項目詳細代碼示例點擊這裏，若是感受對你有用的話請給個👍。