Vue 引入 Mock 模拟 Api 接口

安装 mock.js

npm install -D mockjs

新建 mock 相关文件夹，新建入口 index.js

import Mock from 'mockjs' // 设置响应延时 Mock.setup({ timeout: '100-1000'//可以是整数，也可以是‘-’字符串 }) Mock.mock('/mock/getList/123', 'get', { 'msg': '操作成功', 'code': 200, 'data': [ { 'id': 1, 'nickName': '@cname', 'creatTime': Random.date('yyyy-MM-dd hh:mm:ss') } ] })

正则匹配接口

Mock.mock(/\/mock\/serviceRecord\/list\/([a-z]*)/, 'get', { 'msg': '操作成功', 'code': 200, 'dataList|15-30': [ { 'id|+1': 1, 'nickName': '@cname', 'creatTime': Random.date('yyyy-MM-dd hh:mm:ss'), 'serviceType|1-5': 1 } ] })

main.js 引入 mock 仅在 devloment 环境下使用

process.env.NODE_ENV === 'development' ? import './mock' : ''

其他

随机手机号 // 获取 mock.Random 对象 const Random = Mock.Random // 重仔 Random 方法 Random.extend({ phone: function () { const phonePrefixs = ['132', '133', '134', '135', '136', '137', '138', '180', '187', '189'] return this.pick(phonePrefixs) + Mock.mock(/\d{8}/) } }) Mock.mock('/mock/api', 'post', { code: 200, data: { "rows|10": [ { "phone": function () { return Random.phone() } } ] } })