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'exportdefaultd...
vite-plugin-mock 是一个用于 Vite 项目的插件,它允许开发者在开发环境中模拟后端 API 数据,从而无需实际的后端服务就能进行前端开发。以下是使用 vite-plugin-mock 的详细步骤: 1. 了解 vite-plugin-mock 的基本信息和用途vite-plugin-mock 通过拦截 HTTP 请求,并将这些请求重定向到预定义的 mock 数据,从而模拟...
import { createProdMockServer }from'vite-plugin-mock/es/createProdMockServer'import HelloWorldfrom'./helloWorld' //引入定义的mock模拟接口export function setupMock () {//这个是用来注册mock的,当在生产中使用mock时,很重要createProdMockServer([...HelloWorld]) } 4.vite.config.js文件配置 import { vi...
npm i vite-plugin-mock -D 配置到 vite.config.js import{defineConfig}from'vite';import{viteMockServe}from'vite-plugin-mock';exportdefaultdefineConfig({plugins:[viteMockServe({localEnabled:true,//如果为 false ,则关闭 mock 功能}),]}); 建立模拟数据(/mock/index.ts) import{MockMethod}from'vite...
至此,我们就完成了mockjs的配置。5.不同环境下的mock配置vite.config.js中添加配置 // vite.config.js import vue from "@vitejs/plugin-vue"; import { viteMockServe } from "vite-plugin-mock"; import { defineConfig } from "vite"; const localEnabled = process.env.USE_MOCK || false; const ...
在根目录创建mock文件夹,然后添加index.ts 文件 单纯的使用自己的返回数据话,可以不用引入mockjs 如果是要是使用mockjs的返回的话,一定要引用mockjs import{MockMethod}from'vite-plugin-mock'constMock=require('mockjs')exportdefault[{url:'/api/getUserInfo',method:'post',response:({query})=>{return{code...
所以mock的存在可以节省很多的时间,只不过以前都没用过,因为后端也有很多工具,从来没有前端自己mock过。这次业务需要自己mock数据,所以就使用了一下,发现还挺好用的。 今天分享的是vite-plugin-mock,记录一下使用流程及一些用到的配置。 安装: 代码语言:javascript ...
总的来说,vite-plugin-mock是一个非常实用的插件,它可以帮助前端开发人员在没有后端接口的情况下进行开发和测试,提高了开发效率。通过模拟接口数据,开发者可以更加专注于前端功能的实现,同时也减少了前后端协作的成本。对于使用Vite框架的项目来说,vite-plugin-mock是一个不可或缺的工具。©...
一、什么是Vite Plugin Mock? Vite Plugin Mock是一个基于Vite的模拟数据插件,它可以帮助我们在本地快速地生成和管理模拟数据。该插件允许我们将模拟数据配置写入到.vite-plugin-mock.js文件中,并通过简单的API调用来获取这些数据。 二、Vite Plugin Mock的优势 1. 简化了模拟数据的创建过程:只需要编写一个简单的Ja...
mock文件夹需放在项目根目录,而我放在了src目录。 贴下我的配置 首先安装相关包 npm i vite-plugin-mock cross-env -D npm i mockjs-S vite.config.js 中配置 import {viteMockServe} from"vite-plugin-mock"; plugins: [ viteMockServe({ supporTs:false}), ...