vite-plugin-mock-dev-server
TypeScript icon, indicating that this package has built-in type declarations

1.8.0 • Public • Published

vite-plugin-mock-dev-server

Vite Plugin for API mock dev server.

npm node-current npm peer dependency version npm
GitHub Workflow Status fossa status

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.

Netlify Status

Install

# npm
npm i -D vite-plugin-mock-dev-server
# yarn
yarn add vite-plugin-mock-dev-server
# pnpm
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(/* plugin options */),
  ],
  // The fields defined here can also be used in mock.
  define: {},
  server: {
    // plugin will read `server.proxy`
    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

FOSSA Status

Package Sidebar

Install

npm i vite-plugin-mock-dev-server

Weekly Downloads

2,102

Version

1.8.0

License

MIT

Unpacked Size

183 kB

Total Files

21

Last publish

Collaborators

  • pengzhanbo