vite-plugin-mock配置报错:“localEnabled”不在类型“ViteMockOptions”中

1.安装mockjs 和 vite-plugin-mock

pnpm install -D vite-plugin-mock mockjs

2.在vite.config.ts中配置启用插件

import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        localEnabled: command === 'serve',
      }),
    ],
  }
}

配置启用插件的时候,localEnabled 报错

解决办法:卸载 vite-plugin-mock插件,然后重新安装2.9.6版本的插件

pnpm install -D vite-plugin-mock@2.9.6

  • 11
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vite-plugin-mockVite 用于 mock 数据的插件,可以通过配置来实现 mock 数据的自定义。 首先需要安装 vite-plugin-mock: ``` npm install vite-plugin-mock --save-dev ``` 然后在 `vite.config.js` 引入插件并进行配置: ```js import { defineConfig } from 'vite'; import path from 'path'; import { createMockMiddleware } from 'vite-plugin-mock'; export default defineConfig({ // 其他配置... plugins: [ createMockMiddleware({ mockPath: 'mock', // mock 文件所在的目录 watchFiles: true, // 是否监听文件变化 localEnabled: true, // 是否启用本地 mock,开启后会优先查找 mock 文件夹的文件 prodEnabled: false, // 是否启用生产环境 mock,开启后会在生产环境使用 mock 数据 injectCode: ` import { setupMock } from './mock/setup'; setupMock(); `, // 注入代码,可以自定义 mock 的初始化操作 }), ], }); ``` 上面的配置,我们指定了 mock 文件所在的目录为 `mock`,并启用了本地 mock,但禁用了生产环境的 mock。在 `injectCode` ,我们引入了一个 `setupMock` 方法来初始化 mock 数据,这个方法可以根据自己的需要进行编写。 在 `mock` 目录下可以创建各种 `.js`、`.ts` 等文件来编写 mock 数据,比如: ```js // mock/user.js export default { 'GET /api/user': { id: 1, name: '张三' }, 'POST /api/user': (req, res) => { const { name } = req.body; res.send({ id: 2, name }); }, }; ``` 上面的代码,我们模拟了一个用户信息的 API,可以通过 GET 请求获取用户信息,也可以通过 POST 请求修改用户信息。 最后需要注意的是,vite-plugin-mock 只能用于 mock 接口数据,无法模拟前端的行为,比如点击事件等。如果需要模拟前端行为,可以考虑使用 Jest、Cypress 等测试框架。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值