vite-plugin-mock

In production, vite-plugin-mock uses mockjs instead of Connect middleware. This means you cannot access headers or use certain restful URL parameter formats.

To use mocks in production, you must create a mockProdServer.ts file and call createProdMockServer with your mock modules.

Important Limitations:

• No Node Modules: You cannot use Node.js modules inside your mock.ts files, otherwise production will fail.
• Testing Only: Only use production mocks for specific testing environments. Do not enable them in actual production environments as they may interfere with real Ajax requests (e.g., file uploads/downloads).

// mockProdServer.ts
import { createProdMockServer } from 'vite-plugin-mock/client'
import testModule from '../mock/test'

export function setupProdMockServer() {
  createProdMockServer([...testModule])
}

To use vite-plugin-mock in both development and production environments, you must install both the plugin and mockjs.

Requirements:

• Node version: >=12.0.0
• Vite version: >=2.0.0

Install using your preferred package manager:

# Install mockjs
yarn add mockjs
# or
npm i mockjs -S
# or
pnpm add mockjs

# Install vite-plugin-mock
yarn add vite-plugin-mock -D
# or
npm i vite-plugin-mock -D
# or
pnpm add vite-plugin-mock -D

For production environments (or environments simulating production), use createProdMockServer from vite-plugin-mock/client. This typically involves creating a setup file that imports your mock modules and passes them to the server creator.

Note: Do not use Node.js modules inside your mock .ts files, as this will cause the production environment to fail.

// mockProdServer.ts
import { createProdMockServer } from 'vite-plugin-mock/client'
import testModule from '../mock/test'

export function setupProdMockServer() {
  createProdMockServer([...testModule])
}

To enable mocking in your development environment, add viteMockServe to your Vite plugins array in vite.config.ts. By default, it looks for mock files in a folder named mock and is enabled by default.

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'

export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        // default
        mockPath: 'mock',
        enable: true,
      }),
    ],
  }
}

Add viteMockServe to your Vite plugins array. In development, it uses a Connect middleware which allows you to inspect network requests in the Chrome DevTools console.

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'

export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock',
        enable: true,
      }),
    ],
  }
}

The plugin includes a built-in watcher that automatically reloads mock data when files change.

Key behaviors:

• Activation: Watching is enabled by default via the watchFiles: true option.
• Files Watched: It watches the configPath file and the mockPath directory.
• Disabling: You can disable the watcher by setting watchFiles: false in your options, or by setting the environment variable VITE_DISABLED_WATCH_MOCK=true.
• Implementation: It uses chokidar to monitor changes and clears the require cache to ensure fresh modules are loaded.

The vite-plugin-mock operates by creating a mock server that intercepts incoming HTTP requests.

1. Mock Data Loading: The server loads mock definitions from either a specific configuration file (defined by configPath) or by scanning a directory (defined by mockPath) for .ts, .mjs, or .js files.
2. Request Interception: The requestMiddleware function is used as a middleware in the development server. When a request arrives, the middleware checks the url and method against the loaded mockData.
3. Response Generation: If a match is found, the server can return a static response, a dynamic response function, or a rawResponse function. It also supports a timeout to simulate network latency.
4. Mocking Engine: The final response is processed through mockjs to generate randomized data based on the provided templates.

When initializing the plugin in your vite.config.ts, you can pass a ViteMockOptions object to control its behavior. Key options include:

• mockPath: The directory where your mock files are located.
• configPath: The path to your mock configuration file.
• ignore: A RegExp or a function (fileName: string) => boolean to exclude specific files from being processed.
• watchFiles: Boolean to enable/disable watching for file changes.
• enable: Boolean to enable/disable the plugin.
• logger: Boolean to enable/disable logging.
• cors: Boolean to enable/disable CORS support.

// Example configuration object
const options: ViteMockOptions = {
  mockPath: 'src/mock',
  enable: true,
  watchFiles: true,
  ignore: /\.test\.ts$/
};