（一）將mockjs集成到VUE中后，怎樣根據接口入參返回mock結果

1）安裝mockjs，這一步跳過

2）在項目中建立mock模塊，筆者的目錄結構如下

 

 mock模塊與接口模塊一一對應，有一個接口，就有一個mock

3）編寫登陸模塊mock接口，代碼如下：

import * as appUtils from '../../utils/appUtils'
/**
 * 系統接口MOCK模塊
 * @param opt
 */
export const login = {
  type: 'get',
  url: '/login',
  cb: opt => {
    const params = appUtils.getParams(opt.url)
    console.log('%cmock攔截, 響應: ', 'color:blue', params)
    return params
  }
}

其中cb,為一個function對象，入參為接口參數

該方法內，可以根據入參定制返回結果

4）編輯mock模塊索引文件index.js,代碼如下：

import Mock from 'mockjs'
import * as login from './module/login'

const modules = [login]

// MOCK 初始化配置
Mock.setup({
  timeout: '200-600'
})

for (const module of modules) {
  for (const key in module) {
    const {url, type, cb} = module[key]
    Mock.mock(new RegExp(url), type, (opt) => {
      console.log('%cmock攔截, 請求: ', 'color:blue', opt)
      return cb(opt)
    })
  }
}

若果新增其他mock模塊，如user,menu等等，只要在該文件中引入即可，參考login的引入

5）啟用mock

修改main文件，增加如下配置

const openMock = true
if (process.env.NODE_ENV === 'development' && openMock) {
  console.log('mock model')
  require('./mock')
}

改變openMock，來控制開發環境的mock啟用