（一）将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启用

 

来源：https://www.cnblogs.com/weiziyu/p/12021898.html