vite-plugin-mock 是一个用于 Vite 项目的插件,它允许开发者在开发环境中模拟后端 API 数据,从而无需实际的后端服务就能进行前端开发。以下是使用 vite-plugin-mock 的详细步骤: 1. 了解 vite-plugin-mock 的基本信息和用途vite-plugin-mock 通过拦截 HTTP 请求,并将这些请求重定向到预定义的 mock 数据,从而模拟...
1、创建mockProdServer.ts 文件 // mockProdServer.tsimport { createProdMockServer } from 'vite-plugin-mock/client'// 逐一导入您的mock.ts文件// 如果使用vite.mock.config.ts,只需直接导入文件// 可以使用 import.meta.glob功能来进行全部导入import testModule from '../mock/test'export function setupP...
去vite官网看了一下: Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准 vite-plugin-mock生产环境使用也建议使用 import.meta.glob功能来进行全部导入,但是我打印了一下是一个空对象。
console.log('run port 3001') 只不过vite-plugin-mock用的是connect。get实现的接口,你可以复制出来在浏览器访问看看就明白了。 但是有一点没理解,项目启动代理的情况下,如果本地启动了一个mock接口,请求就会是本地启动的接口,如果本地没有,会被代理到设置的代理地址。 我觉得是代理proxy实现的,没查到xhr会自动...
创建mockTeat.js,用于产生模拟数据 模拟数据,使用规则请看使用文档 打开vite.config.js文件,配置vite-plugin-mock 不安装vite-plugin-mock插件也可以模拟后台数据,但是要将mock文件引入main.js或者自己封装的axios文件,但是在浏览器控制台网络那里是没法看到网络请求的。
至此,我们就完成了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 ...
Vite Mock的用法如下: 1.安装依赖:安装Vite框架和Vite Mock插件。可以通过npm或yarn来安装Vite,使用npm install vite-plugin-mock -D来安装Vite Mock插件。 2.创建mock文件夹:在项目内src文件夹下新建文件夹,如http,然后在http文件夹内部创建mock文件夹,内部创建index.js文件。 3.编写mock数据:在mock文件夹中的...
4、在 vite.config.js 中使用vite-plugin-mock插件 // mock数据import{viteMockServe}from'vite-plugin-mock';// https://vitejs.dev/config/exportdefault({mode,command})=>{constprodMock=false;returndefineConfig({plugins:[...viteMockServe({mockPath:'./src/mock',// 设置模拟.ts 文件的存储文件夹...
今天分享的是vite-plugin-mock,记录一下使用流程及一些用到的配置。 安装: npm i mockjs vite-plugin-mock -D 1. vite.config.ts 配置 import { UserConfigExport, ConfigEnv } from 'vite' import { viteMockServe } from 'vite-plugin-mock'
但你也可以使用options.prefix配置 mock 编写mock文件 默认配置,在你的项目根目录的mock目录中编写mock数据: mock/api.mock.ts: import{defineMock}from'vite-plugin-mock-dev-server'exportdefaultdefineMock({url:'/api/test',body:{a:1,b:2,}}) ...