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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！