首先安装mockjs
npm install mockjs
新建mock文件夹,创建index.js文件,这里就是我们注册所有mock服务的地方
index.js
// 首先引入Mock
import Mock from 'mockjs';
// 设置拦截ajax请求的相应时间
Mock.setup({
timeout: '200-600'
});
let configArray = [];
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
if (key === './index.js') return;
configArray = configArray.concat(files(key).default);
});
// 注册所有的mock服务
configArray.forEach((item) => {
for (let [path, target] of Object.entries(item)) {
let protocol = path.split('|');
Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
}
});
服务注册好之后,在main.js中引入
import Mock from 'mockjs';
在mock文件夹下随便创建一个文件demoList.js 规定接口数据,然后导出。方便后面处理接口名称都加前缀mock
let demoList = {
code: 0,
message: 'success',
total: 10,
'data|10': [{
'id|+1': 1, //生成id自动加 1
address:'@province', //生成地址
name: '@cname', //生成名字
date:'@date("yyyy-MM-dd")', //随机生成日期
'any|3': "测试", //指定字符串*3
'status|1-2':1, //1~2的随机整数
'age|20-30': 23,
'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
}]
};
export default {
'get|/mock/demo': demoList
}
更多mock语法参考官方文档 http://mockjs.com/examples.html
mock模拟数据和后台接口同时使用, 在axios中引入刚刚注册的mock服务。在拦截器中增加mock判断,把baseURL置空。因为vue.config加了代理,碰到api开头的会转到后台的接口。置空后请求就会转发到mock服务
require("../mock/index.js")
service.interceptors.request.use(config => {
if(config.url.indexOf("mock/")>=0){
config.baseURL=""; //baseURL置空
}
if (store.getters.token) {
// 设置公共请求头
config.headers.Authorization = 'Bearer ' + store.getters.token;
}
return config
}, error => {
Promise.reject(error)
})
然后就可以正常调用了 接口地址为 /mock/demo