1.、npm安装mock

npm install mockjs

2、使用,在src下创建mockjs目录，新建mock.js

// 加载mockjs库
import Mock from 'mockjs'
// 构建一个函数对象，返回mock数据
const mockData = function () {
  let data;
  // 此处省略对data的一系列运算
  return {data: data}
}
// url是真实的url，第二个参数是post和get都管，第三个参数就是传入函数对象
Mock.mock('url', /post|get/i, mockData);
//如：
//Mock.mock('/login', 'post', loginFun); //登录

3.、main.js中引用mock.js

require('./mock/mock.js')

4.eg

// 获取 mock.Random 对象
const Random = Mock.Random;
Mock.mock('/user/list','post',{
  data:{
    "list|5":[  //生成|5个如下格式名字的数据
      {
        "id|+1":1,  //数字从当前数开始后续依次加一
        "name": "@cname", //名字为随机中文名字
        "age|1~40": 20,    //年龄为1-40之间的随机数字
        "sex|1":["男","女"],  //性别是数组中的一个，随机的
        "job|1":["web","UI","python","php","java"],    //工作是数组中的一个
        'email':"@email",  //随机邮箱
        'city':"@city()", //  city: "扬州市"
        'city2':Random.city(true),  // city2: "新疆维吾尔自治区 吐鲁番地区"
        'county':"@county(true)",  // county "澳门特别行政区 离岛 -"
        'county2':Random.county(true),  // county2: "湖南省 株洲市 茶陵县"
      }
    ]
  }
})

调用接口：

ths.$axios.post('/user/list').then(res=>{ console.log(res)})

生成的数据结果为：

image

再试一组：

Mock.mock('/other','post',{
  "data|5":[
    {
      'img':"@image", //随机获取图片
      'boo1':"@boolean",//随机获取boolean值
      'date':Random.now('yyyy-MM-dd HH:mm:ss SS'),
      'img1':Random.image('200x100'),
      // Random.image( size, background, text )
      'img2':Random.image('200x100', '#4A7BF7', 'Hello'),
      // Random.image( size, background, foreground, text )
      'img3':Random.image('200x100', '#50B347', '#FFF', 'Mock.js'),
      // Random.image( size, background, foreground, format, text )
      'img4':Random.image('200x100', '#894FC4', '#FFF', 'png', '!'),
      'color':Random.color(),
      'foo': 'foo函数测试',
      'name': function() {
        return this.foo
      }
    }
  ]
})

生成：

image.png