在vue中使用mock

首先安装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