mockjs用法（vue项目）

最新推荐文章于 2025-04-19 14:26:06 发布

Web菜鸡的心路历程

最新推荐文章于 2025-04-19 14:26:06 发布

阅读量351

点赞数

分类专栏：笔记文章标签： vue.js javascript

本文链接：https://blog.youkuaiyun.com/wjfcainiao/article/details/120481373

版权

笔记专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何在Node.js项目中安装并配置MockJS，创建mock数据文件，并在main.js中启用mock模式。重点在于模拟API接口和注意事项，包括接口地址匹配、mock开关控制和mock请求特性。

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

1.安装 npm install mockjs --save

2.建立mock.js文件，文件可放于项目utils文件夹下，文件内容如下

import Mock from "mockjs";

export default Mock.mock("http://127.0.0.1:8080", {
  "data|1-20": [
    {
      "id|+1": 1,
      name: "@cname", //随机中文名字
      username: /[a-z]{2}[0-9]{6}/, //随机用户名
      "age|15-40": 15,
      tel: /^1(5|3|7|8)[0-9]{9}$/, //随机手机号码
      password: /[0-9]{6}/, //6位0-9的密码
      email: "@email()", //随机email
      "sex|0-1": 0, //性别
      time: "@date(yyyy-MM-dd)", //时间
      img: "@image", //生成一个随机的图片地址
      ctitle: "@ctitle", //随机生成一个中文标题
      ip: "@ip", //随机生成一个ip地址
      region: "@region", //生成一个大区
      province: "@province", //生成一个省份
      city: "@city", //生成一个市
      country: "@country", //一个县
      zip: "@zip" //邮政编码
    }
  ]
});

3.在main.js引入mockjs

// mock开关
const mock = true
if (mock) {
  require('@/utils/mock')
}

至此，项目就可以正常使用mock模拟数据了，在具体组件内应用的话，只需要在请求接口的时候，将地址改为mockjs里配置的地址即可。

在使用的过程中有需要注意的几点：①模拟请求的接口地址应该跟mock.js里配置的地址保持一致，否则不生效 ②mock开关默认为true即表示mock是处于打开状态的，后期如果接入实际接口，这边需要改为false关闭mock模拟 ③mock请求是脚本请求，在浏览器的network中看不到