vue3中使用mock

  import { viteMockServe } from 'vite-plugin-mock'  
  viteMockServe({
      localEnabled: command === 'serve',
    }),
类型“{ localEnabled: boolean; }”的参数不能赋给类型“ViteMockOptions”的参数。
  对象字面量只能指定已知属性,并且“localEnabled”不在类型“ViteMockOptions”中。

确实没有这个选项了

  • viteMockServe Options
    {
      mockPath?: string;
      ignore?: RegExp | ((fileName: string) => boolean);
      watchFiles?: boolean;
      enable?: boolean;
      ignoreFiles?: string[];
      configPath?: string;
    }
    
    其中开关在enable这里:
  • type: boolean
  • default: true
  • Whether to enable the mock function

可以找一个相对详细的教程跟着走
https://blog.csdn.net/weixin_42067720/article/details/115579817

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇博客也许可以解决你的问题👉 :vue3 之mock数据的使用
  • 除此之外, 这篇博客: vue中使用Mock中的 简单测试 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    在项目中创建mock文件夹并新建文件test.js

    const Mock = require("mockjs")
    let id =Mock.mock("@id")
    console.log(id)
    let obj = Mock.mock({
        id:"@id()",	//随机id
        username:"@cname()",	//随机用户名
        date:"@date()",	//随机日期
        avatar:"@image('200x200','red','#fff','avatar')",		//随机头像
        description:"@paragraph()",		////随机描述
        ip:"@ip()"	//随机ip地址
        email:"@email()"	//随机邮箱
    })
    console.log(obj)
    

    终端输出 node test进行测试(非热更新方式)
    node热更新插件为nodemon

    yarn add nodemon / npm install -g nodemon
    

    使用方式

    nodemon index
    
  • 您还可以看一下 lampol老师的2020最新vue实战移动端京东商城(第二季)课程中的 vue实战介绍以及mock工具安装使用小节, 巩固相关知识点
  • 以下回答来自chatgpt:

    我该如何在Vue3中正确使用Mock?

    在Vue3中使用Mock可以通过如下步骤实现:

    1. 在Vue项目中安装mockjs。
    npm install mockjs
    
    1. 安装axios,使用axios发送AJAX请求。
    npm install axios --save
    
    1. 在安装Mock的同时也可以安装json5来解决无法添加注释的问题。
    npm install json5 --save-dev(可以不要)
    
    1. 引入Mock并使用Mock的随机函数来模拟数据,将数据返回回去。
    import Mock from 'mockjs'
    
    Mock.mock('/api/goodslist','get',{
        status:200,
        message:'获取商品列表成功!',
        'data|5-20':[{
            id:'@increment(1)',
            name:'@cword(2,8)',
            price:'@natural(2,5)',
            count:'@natural(100,999)',
            img:'dataImage(300x300)',
        }]
    })
    
    1. 可以将Mock封装在Vue项目中,使用axios的mock数据来模拟数据。

    2. 对Mock生成的数据进行重组。

    3. 对Mock生成的数据进行参数可变的处理。

    详细实现方法请参照参考资料提供的代码和步骤。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
  viteMockServe({
    localEnabled: command === 'serve',
  } as any),