mockjs在vue项目中使用

最新推荐文章于 2025-04-01 15:16:52 发布

原创最新推荐文章于 2025-04-01 15:16:52 发布 · 794 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端

当前文章被收录于：

web前端

63 篇文章 0 人学习

订阅专栏查看详情

vue.js

当前文章被收录于：

vue.js

8 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了如何在Node.js项目中通过MockJS实现开发环境下的API模拟，包括在main.js中条件引入mock模块，创建mock文件夹并配置mock数据，以及使用Mock.mock方法来生成模拟数据。通过这个过程，开发者可以隔离真实数据，专注于单元测试和API接口的本地开发。

项目中引入

npm install mockjs

在main.js中引入

// mockjs
if(process.env.NODE_ENV === "development") {
  require("./mock");
}

在src文件夹下创建mock文件夹，并创建index.js文件

import Mock from "mockjs";
// URL中共同地址段
const baseURL = "/api/kpiManBack";
Mock.mock(baseURL + "/coreWorks", "get", res);

// 模拟的数据
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})

// 参数config为接收的请求体
const res = config => {
  console.log(config);
  return data
}