Vue项目引入Mock.js,只在开发环境打开，方便多人开发

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.js
    startMock();
}

(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) 将被执行，并把执行结果作为响应数据返回。
// 详细可看https://github.com/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);
        })
}