Vue Cli中使用Mock.js

本文介绍如何使用Mock.js设置模拟API接口,包括安装Mock.js、配置延迟时间和模拟不同API返回数据的方法。此外还展示了如何根据环境变量加载mock文件。

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

安装Mock.js

cnpm i mockjs -S

在src下新建mock/index.js

mock/index.js

import Mock from 'mockjs';

Mock.setup({
    timeout: 2000 //2000为自钉子模拟延迟时间,可更改
    //timeout: '200-2000', //横杠 '-' 风格的字符串,表示响应时间介于 200 和 2000 毫秒之间。
});

//第一个参数为需要模拟的API接口地址,第二个参数为模拟返回的数据结果对象
Mock.mock('http://www.xxx.com/api', {msg: 'From mockjs.'});

Mock.mock('http://www.xxx.com/api2', {msg: 'From mockjs too.'});

main.js中添加代码

//...

Vue.config.productionTip = false

//若测试环境,则引入mock
if (process.env.NODE_ENV === 'development') require('./mockjs/index');

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

完成,预览测试!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值