vue-cli中使用mockjs拦截axios请求

一、准备工作

1.整理API文件

为了方便接口管理，统一放在src下的api文件夹中

//index.js
const api = {
    GET_TEST: 'api/getTest'
};
export default api;

2.挂载到main.js中的vue原型上

//main.js
import api from './api';
Vue.prototype.$api = api;

3.在src目录下创建环境接口配置文件

//bese-url.js

 * 输出接口baseUrl地址
 * @param {String} env 环境模式
 * @returns  {String} 环境模式对应的baseUrl
 */
export default function() {
    const env = process.env.NODE_ENV; //获取环境
    if (!env) {
        return '';
    }
    const envConfig = {
        development: 'http://localhost:8080/', //开发环境
        production: 'http://www.lihefei.com/' //生产环境
    };
    return envConfig[env];
}

4.配置axios的baseURL

axios封装在src目录中的http文件夹下，详细的封装就不写了，网上很多例子，这里只写与baseURL有关的配置

//index.js
import baseUrl from '@/utils/lib/base-url'; //导入bese-url模块
axios.defaults.baseURL = baseUrl(); //设置axios的默认baseURL 

二、配置mockjs

1.安装mockjs

在vscode中键入命令安装

cnpm install mockjs -D

2.创建mock文件夹

在src文件下新建mock文件夹及index.js，所有的mock统一处理

//index.js
import Mock from 'mockjs'; //导入mock模块
import api from '@/api'; //导入前面创建好的api(@为src目录，import的方式导入api模块默认会加载api/index.js)
import baseUrl from '@/utils/lib/base-url'; //导入前面创建的baseUrl模块

/**
 * 将字符串url转换为正则匹配
 * 转正则的原因：如果url是字符串类型，默认会完全匹配mock地址与应用请求地址，参数不同也会造成mock拦截失效，解决方式就是用正则匹配
 * @param {String} url 接口地址
 * @return {RegExp} 返回正则匹配规则
 */
function regUrl(url) {
	let urlStr = baseUrl() + url + '.*'; 
	return RegExp(urlStr);
}

//拦截接口，模拟接口数据
Mock.mock(regUrl(api.GET_TEST), /get|post/i, { 
    code: 0,
    msg: 'Mock接口模拟数据',
    data: [1, 2, 3, 4, 5]
});

3.在main.js中加载创建好的mock文件

//main.js
process.env.NODE_ENV != 'production' && require('./mock/index'); //如果是线上环境则不加载

三、vue业务应用

//test.vue
data() {
	return {
		list: []
	};
},
create() {
	const that = this;
	let params = { user: 'admin'};
	this.$http.get(this.$api.GET_TEST, params)
	.then((resolve, reject) => {
		if (resolve.code === 0) {
			that.list = resolve.data;
		}
		console.log(resolve);
	});
}