Gathering detailed insights and metrics for @zhennann/vite-plugin-fake-server
Gathering detailed insights and metrics for @zhennann/vite-plugin-fake-server
Gathering detailed insights and metrics for @zhennann/vite-plugin-fake-server
Gathering detailed insights and metrics for @zhennann/vite-plugin-fake-server
npm install @zhennann/vite-plugin-fake-server
Typescript
Module System
Node Version
NPM Version
70
Supply Chain
91.3
Quality
74.4
Maintenance
50
Vulnerability
99.3
License
TypeScript (72.09%)
JavaScript (24.86%)
Vue (2.08%)
HTML (0.92%)
CSS (0.04%)
Total Downloads
12,074
Last Day
3
Last Week
3
Last Month
14
Last Year
11,648
MIT License
80 Stars
151 Commits
7 Forks
5 Watchers
2 Branches
3 Contributors
Updated on Jul 02, 2025
Latest Version
2.1.2
Package Id
@zhennann/vite-plugin-fake-server@2.1.2
Unpacked Size
162.05 kB
Size
43.45 kB
File Count
11
NPM Version
10.7.0
Node Version
20.14.0
Published on
Jun 22, 2024
Cumulative downloads
Total Downloads
Last Day
0%
3
Compared to previous day
Last Week
0%
3
Compared to previous week
Last Month
-36.4%
14
Compared to previous month
Last Year
2,634.3%
11,648
Compared to previous year
1
A fake server plugin for Vite. Live Demo
ts
, js
, mjs
, cjs
, cts
, mts
files.1npm install --save-dev vite-plugin-fake-server
Configure plugins in the configuration file of Vite, such as vite.config.ts
:
1// vite.config.ts 2import { defineConfig } from "vite"; 3import { vitePluginFakeServer } from "vite-plugin-fake-server"; 4 5// https://vitejs.dev/config/ 6export default defineConfig({ 7 plugins: [ 8 vitePluginFakeServer(), 9 ], 10});
You can create a new file in the fake
folder in the directory where the Vite configuration file is located, such as user.fake.ts
:
1// fake/user.fake.ts 2import Mock from "mockjs"; 3import { defineFakeRoute } from "vite-plugin-fake-server/client"; 4import { faker } from "@faker-js/faker"; 5 6export default defineFakeRoute([ 7 { 8 url: "/mock/get-user-info", 9 response: () => { 10 return Mock.mock({ 11 id: "@guid", 12 username: "@first", 13 email: "@email", 14 avatar: '@image("200x200")', 15 role: "admin", 16 }); 17 }, 18 }, 19 { 20 url: "/fake/get-user-info", 21 response: () => { 22 return { 23 id: faker.string.uuid(), 24 avatar: faker.image.avatar(), 25 birthday: faker.date.birthdate(), 26 email: faker.internet.email(), 27 firstName: faker.person.firstName(), 28 lastName: faker.person.lastName(), 29 sex: faker.person.sexType(), 30 role: "admin", 31 }; 32 }, 33 }, 34]);
After starting the project through Vite, you can request the custom URL above through XHR or Fetch.
For case details, please click this link to view some examples or experience it directly online - Live Demo
The defineFakeRoute function parameters require the user to enter the route type as follows:
1export interface FakeRoute {
2 url: string;
3 method?: HttpMethodType;
4 timeout?: number;
5 statusCode?: number;
6 statusText?: string;
7 headers?: OutgoingHttpHeaders;
8 response?: (processedRequest: ProcessedRequest, req: IncomingMessage, res: ServerResponse) => any;
9 rawResponse?: (req: IncomingMessage, res: ServerResponse) => void;
10}
11
12export function defineFakeRoute(config: FakeRoute | FakeRoute[]) {
13 return config;
14}
Type: string
Default: "fake"
Set the folder where the fake xxx.fake.{ts,js,mjs,cjs,cts,mts}
files is stored.
Type: string[]
Default: []
Exclude files in the include
directory.
document: https://github.com/mrmlnc/fast-glob#ignore
Type: string | boolean
Default: "fake"
Set the infix name used in the fake file name.
Type: boolean
Default: true
Set whether to listen to include
files.
Type: boolean
Default: true
Set whether to display the request log on the console.
In order to maintain logs and screen clearing strategies consistent with Vite style on the terminal, the vite-plugin-fake-server plugin will automatically read the following three parameters in the Vite configuration file or in the Vite command line.
A preview image:
Type: string[]
Default: ["ts", "js", "mjs", "cjs", "cts", "mts"]
Set the fake files extensions.
Type: number
Default: undefined
Set default response delay time.
Type: string
Default: ""
Set the root address of the request URL.
Type: OutgoingHttpHeaders
Default: {}
Set default headers for responses.
Type: boolean
Default: true
Set up the service simulator in the development environment.
Powered by Connect technology.
Type: boolean
Default: false
Set up the service simulator in the production environment.
Powered by XHook technology.
⚠️ The node module cannot be used in the fake file, otherwise the production environment will fail.As an alternative to keep consistent with the development environment, you can build a standalone deployment server, see build option.
Compared with the development environment, the API interface defined in the production environment does not have a rawResponse
function. The response function does not have the second parameter request
and the third parameter response
.
1export interface FakeRoute { 2 url: string; 3 method?: HttpMethodType; 4 timeout?: number; 5 statusCode?: number; 6 statusText?: string; 7 headers?: OutgoingHttpHeaders; 8 response?: (processedRequest: ProcessedRequest) => any; 9}
Type: boolean
Clarify that the plugin runs on the HTTP/2 protocol. By default, automatically follow Vite's server-https configuration.
The status text in HTTP/2 is always an empty string.
Type: boolean | ServerBuildOptions
Default: false
Set whether to export a independently deployable fake service(only valid in build mode).
1interface ServerBuildOptions { 2 /** 3 * @description Server port 4 * @default 8888 5 */ 6 port?: number; 7 /** 8 * Directory relative from `root` where build output will be placed. If the 9 * directory exists, it will be removed before the build. 10 * @default "fakeServer" 11 */ 12 outDir?: string; 13}
# packages/vite-plugin-fake-server
npm run build:watch
# packages/playground/react-sample
npm run dev
# packages/vite-plugin-fake-server
npm run build:watch
# packages/playground/react-sample
npm run build
npm run preview
MIT License © 2023-Present Condor Hero
No vulnerabilities found.
No security vulnerabilities found.