Vue Cli中使用Mock.js

最新推荐文章于 2022-06-24 18:09:41 发布

原创最新推荐文章于 2022-06-24 18:09:41 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

笔记

9 篇文章

订阅专栏

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

安装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');