vite-plugin-mock-server
Provide local mocks for Vite.
A mock server plugin for Vite, developed based on TypeScript.
And support using TypeScript and JavaScript to write Mock API. When the Mock API file
is modified, it will be hot updated automatically. Support and compatibility
with express.js middlewares.
Install
node version: >=12.0.0
vite version: >=2.0.0
npm i vite-plugin-mock-server -D
yarn add vite-plugin-mock-server -D
Run example
cd ./example
npm install
npm run dev
Usage
- Config plugin in vite.config.ts, compatible with express.js middlewares.
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bodyParser from 'body-parser'
import cookieParser from 'cookie-parser'
import mockServer from 'vite-plugin-mock-server'
export default defineConfig({
plugins: [
vue(),
mockServer({
logLevel: 'info',
middlewares: [
cookieParser(),
bodyParser.json(),
bodyParser.urlencoded(),
bodyParser.text(),
bodyParser.raw()
]
})
]
})
Module exports
mockModules
Ignore manual configuration, it will be filled in automatically.
export type MockOptions = {
logLevel?: 'info' | 'error' | 'off'
urlPrefixes?: string[]
mockJsSuffix?: string
mockTsSuffix?: string
mockRootDir?: string
mockModules?: string[]
noHandlerResponse404?: boolean
middlewares?: MockLayer[]
}
const options: MockOptions = {
logLevel: 'info',
urlPrefixes: [ '/api/' ],
mockRootDir: './mock',
mockJsSuffix: '.mock.js',
mockTsSuffix: '.mock.ts',
noHandlerResponse404: true,
mockModules: [],
middlewares: []
}
type Request = Connect.IncomingMessage & {
body?: any,
params?: { [key: string]: string },
query?: { [key: string]: string },
cookies?: { [key: string]: string },
session?: any
}
export type MockFunction = {
(
req: Request,
res: http.ServerResponse,
urlVars?: { [key: string]: string }
): void
}
export type MockHandler = {
pattern: string,
method?: string,
handle: MockFunction
}
export type MockLayer = (
req: Request,
res: http.ServerResponse,
next: Connect.NextFunction
) => void;
Mock file examples
The pattern
is an ant-style path pattern string,
use @howiefh/ant-path-matcher
to match the pattern
and request URL
.
import { MockHandler } from '../../src'
const mocks: MockHandler[] = [
{
pattern: '/api/test1/1',
handle: (req, res) => {
res.end('Hello world!' + req.url)
}
},
{
pattern: '/api/test1/*',
handle: (req, res) => {
res.end('Hello world!' + req.url)
}
},
{
pattern: '/api/test1/users/{userId}',
handle: (req, res) => {
const data = {
url: req.url,
params: req.params,
query: req.query,
body: req.body
}
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify(data))
}
},
{
pattern: '/api/test1/body/json',
method: 'POST',
handle: (req, res) => {
res.setHeader('Content-Type', 'application/json')
res.end(JSON.stringify(req.body))
}
},
]
export default mocks
import { MockHandler } from 'vite-plugin-mock-server'
export default (): MockHandler[] => [
{
pattern: '/api/test2/1',
handle: (req, res) => {
res.end('Hello world!' + req.url)
}
},
{
pattern: '/api/test2/2',
handle: (req, res) => {
res.end('Hello world!' + req.url)
}
}
]
module.exports = [
{
pattern: '/api/merchant1',
method: 'GET',
handle: (req, res) => {
res.end('merchant1:' + req.url)
}
},
{
pattern: '/api/merchant2',
method: 'GET',
handle: (req, res) => {
res.end('merchant2:' + req.url)
}
},
{
pattern: '/api/merchant2',
method: 'GET',
handle: (req, res) => {
res.end('merchant3:' + req.url)
}
}
]
module.exports = [
{
pattern: '/api/hello1',
method: 'GET',
handle: (req, res) => {
res.end('hello1:' + req.url)
}
},
{
pattern: '/api/hello2',
method: 'GET',
handle: (req, res) => {
res.end('hello2:' + req.url)
}
},
{
pattern: '/api/hello3',
method: 'GET',
handle: (req, res) => {
res.end('hello2:' + req.url)
}
}
]
License
MIT