mock模拟数据使用引入【vue中】_有一个mock地址,将他引入vue项目中-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43023873/article/details/101014350

本文详细介绍了如何使用MockJS在前端项目中搭建接口模拟，包括安装MockJS、在main.js中引入、配置全局延时、创建并注册模拟数据接口、以及如何在具体页面中调用这些接口进行测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装mockjs

npm install mockjs --save-dev

2.main.js引入

require('./mock/PC/index')

3.mock文件夹下创建index.js【会自动获取上下文的其他页面js】

import Mock from 'mockjs';

	// 导入所有的模拟接口（require.context 可用于获取目录上下文）
	const context = require.context('./', true, /\.js$/);
	context
  		.keys()
  		.filter(item => item !== './index.js') // 过滤掉 index.js，只保留业务相关的 js
  		.map(context);

	// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
	Mock.setup({
  		timeout: '300-600',
		});

4.创建其他js数据【具体页面具体js】

import Mock from "mockjs";

	Mock.mock(new RegExp('^/api/v1/core/account/usertree'), 'get', () => {
  	const userTree = [
    		{ id: 1, code: 1, name: '机构1' },
    		{ id: 2, code: 2, name: '机构2' },
    		{ id: 3, code: 3, name: '张三', parentCode: 1 },
    		{ id: 4, code: 4, name: '老李', parentCode: 2 },
  		{ id: 5, code: 5, name: '王二狗', parentCode: 2 },
  	];

  	return userTree;
	});

5.测试调用

this.$axios({
        	method:'get',
        	// url:window.apiUrl+'/medicom/account/GetCoreRegisterInfo',
        	url:window.apiUrl+'/v1/core/account/usertree',
        	headers:{} //如果需要添加请求头可在这写

      	}).then(res => {  //res是返回结果
        	console.log('res',res)
      	}).catch(err => { //请求失败就会捕获报错信息
        	//err.response可拿到服务器返回的报错数据
        	//console.log(res.data.errs)
      	})