1. npm安装Mock模块
npm install mockjs -D (–save-dev)
2 . 在src目录下创建mock文件夹，并创建如下图文件目录
(1)index.js文件代码如下
import Mock from 'mockjs';/*** 开始进行mock*/const startMock = ()=> {// 告知开启了Mock.js// Message.error('开启了本地mock模式，调试请注意');Mock.setup({timeout:'300-500'})// 读取./modules目录下的以js作为后缀的文件const modulesFiles = require.context('./modules',true,/\.js$/);console.log('开启了本地mock模式，调试请注意:',modulesFiles.keys())modulesFiles.keys().forEach((key) => {let f = modulesFiles(key);f();})}export default function (debug) {if (debug === false) {return;}// 开启mock.jsstartMock();}
(2).在modules目录下即可以创建以名字命名的js文件，用来标明是谁使用的mock文件,我这里创建了一个wh.js文件
const Mock = require('mockjs');const create = require('../mockCreator');// 这里使用的是Mock.mock( rurl, rtype, function( options ) )// 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。// 详细可看/nuysoft/Mock/wiki/Mock.mock()module.exports = function () {Mock.mock('/wh','get',(config) =>create({name:'weimeimei',sex:'meinu'}))}
(3)mockCreator.js文件用于抽取返回数据的公共部分
module.exports = (data) => {return {status_code : 0,status_msg:'请求成功',data,}}
3.在vue.config.js文件做如下配置，定义一个_DEV_全局变量，用于判断是开发环境还是生产环境
const {DefinePlugin} = require('webpack')module.exports = {lintOnSave: false,productionSourceMap: false,configureWebpack: {plugins:[new DefinePlugin({_DEV_:process.env.NODE_ENV === 'development'})]},}
4.在入口文件main.js文件引入Mock.js
import mock from '@/mock'// 是本地环境才能开启，防止线上出问题if (_DEV_) {mock(true)}
5.使用
import axios from "axios";created（）{axios.get("/wh").then((res)=>{console.log(res);})}
