vite-plugin-mock-dev-server
Vite Plugin for API mock dev server.
Features
- ⚡️ Lightweight, Flexible, Fast.
- 🧲 Not injection-based, non-intrusive to client code.
- 💡 ESModule/commonjs.
- 🦾 Typescript.
- 🔥 HMR
- 🏷 Support
.[cm]?js
/ .ts
/ .json
/ .json5
. - 📦 Auto import mock file.
- 🎨 Support any lib, like
mockjs
, or do not use it. - 📥 Path rule matching, request parameter matching.
- ⚙️ Support Enabled/Disabled any one of the API mock.
- 📀 Supports response body content type such as
text/json/buffer/stream
. - ⚖️ Use
server.proxy
- 🍕 Support
viteConfig.define
and env
in the mock file. - ⚓️ Support
viteConfig.resolve.alias
in the mock file. - 🌈 Support
vite preview
mode. - 📤 Support
multipart
content-type, mock upload file. - 📥 Support mock download file.
- ⚜️ Support
WebSocket Mock
- 🗂 Support building small independent deployable mock services.
Documentation
See the documentation for more details.
Install
npm i -D vite-plugin-mock-dev-server
yarn add vite-plugin-mock-dev-server
pnpm add -D vite-plugin-mock-dev-server
Usage
vite.config.ts
import { defineConfig } from 'vite'
import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
export default defineConfig({
plugins: [
mockDevServerPlugin(),
],
define: {},
server: {
proxy: {
'^/api': { target: 'http://example.com' }
}
}
})
The plugin will read the configuration of server.proxy
or options.prefix
, and enable mock matching for matched URLs.
The plugin will also read the define
configuration, which supports direct use in mock files.
Edit Mock File
By default, write mock data in the mock
directory of your project's root directory:
mock/**/*.mock.ts
:
import { defineMock } from 'vite-plugin-mock-dev-server'
export default defineMock({
url: '/api/test',
body: { a: 1, b: 2 }
})
Links
LICENSE
The plugin is licensed under the MIT License