import{MockMethod}from'vite-plugin-mock';constarr:any=[];for(letindex=0;index<20;index++){arr.push({customer_name:'wade',status_text:'登录成功',os:'Windows 10',browser:'Chrome(99.0.4844.51)',ip:'192.168.9.110',created:'2021-12-14 10:41:02',location:'局域网 局域网',});}constlog...
pnpm install-Dvite-plugin-mock mockjs 配置vite.config.ts 代码语言:javascript 复制 import{defineConfig}from'vite'import{createSvgIconsPlugin}from'vite-plugin-svg-icons'// 引入 svg 图标所需要的插件importvuefrom'@vitejs/plugin-vue'importpathfrom'path'import{viteMockServe}from"vite-plugin-mock";//...
// mockProdServer.tsimport { createProdMockServer } from 'vite-plugin-mock/client'// 逐一导入您的mock.ts文件// 如果使用vite.mock.config.ts,只需直接导入文件// 可以使用 import.meta.glob功能来进行全部导入import testModule from '../mock/test'export function setupProdMockServer() {createProdMock...
vite-plugin-mock 是一个用于 Vite 项目的插件,它允许开发者在开发环境中模拟后端 API 数据,从而无需实际的后端服务就能进行前端开发。以下是使用 vite-plugin-mock 的详细步骤: 1. 了解 vite-plugin-mock 的基本信息和用途vite-plugin-mock 通过拦截 HTTP 请求,并将这些请求重定向到预定义的 mock 数据,从而模拟...
mock/api.mock.ts: import{defineMock}from'vite-plugin-mock-dev-server'exportdefaultdefineMock({url:'/api/test',body:{a:1,b:2,}}) 方法 mockDevServerPlugin(options) vite plugin vite.config.ts import{defineConfig}from'vite'importmockDevServerPluginfrom'vite-plugin-mock-dev-server'exportdefault...
vite-plugin-mock是一个用于Vite框架的插件,它的作用是模拟后端接口数据,用于前端开发和调试阶段。通过使用vite-plugin-mock,开发者可以在前端项目中定义和配置虚拟接口,使得前端开发人员能够独立于后端进行开发和测试。 使用vite-plugin-mock的好处是可以避免依赖后端接口的情况下进行前端开发。在传统的前后端分离开发中,...
在vite-plugin-mock中,我们可以使用mockjs的语法来定义模拟数据。 下面是mockjs的一些常用语法: 1.模拟字符串: Mock.mock('@string'):随机生成一个字符串。 Mock.mock('@float(0, 100, 2)'):生成一个0到100之间的保留两位小数的浮点数。 3.模拟数组: Mock.mock({ 'list|1-10': [{ 'id|+1': 1...
npm i mockjs vite-plugin-mock -D 1. vite.config.ts 配置 import { UserConfigExport, ConfigEnv } from 'vite' import { viteMockServe } from 'vite-plugin-mock' import vue from '@vitejs/plugin-vue' export default ({ command }: ConfigEnv): UserConfigExport => { ...
我们看到官网来进行Mock环境的集成: 传送门 安装插件 pnpm install -D vite-plugin-mock mockjs 配置vite.config.ts import { defineConfig } from 'vite'import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // 引入 svg 图标所需要的插件import vue from '@vitejs/plugin-vue'import path from...
而 `Mock.js` 是一个用于模拟数据的库,常与 `vite-plugin-mock` 配合使用。 以下是使用 `Mock.js` 语法的示例: 1. **基本数据生成** 使用`Mock.Random` 对象生成随机数据。 ```javascript import Mock from 'mockjs' Mock.mock('/user', 'get', { 'name|1-3': '张', // 名字为 "张" 的...