Gauss

Appearance

@gauss/vite-plugin-mock-server ​

提供本地模拟服务。vite 的数据模拟插件，是基于 vite.js 开发的。

安装 ​

shell
yarn add mockjs
# or
npm i mockjs -S
yarn add mockjs
# or
npm i mockjs -S

and

shell
yarn add @gauss/vite-plugin-mock-server -D
# or
npm i @gauss/vite-plugin-mock-server -D
yarn add @gauss/vite-plugin-mock-server -D
# or
npm i @gauss/vite-plugin-mock-server -D

使用 ​

开发环境 ​

您可以在 Google Chrome 控制台中查看网络请求记录

vite.config.ts 配置

js
import { UserConfigExport, ConfigEnv } from 'vite'

import { viteMockServe } from '@gauss/vite-plugin-mock-server'
import vue from '@vitejs/plugin-vue'

export default ({ command }: ConfigEnv): UserConfigExport => {
    return {
        plugins: [
            vue(),
            viteMockServe({
                mockPath: './src/mocks',
                localEnabled: command === 'serve',
            }),
        ],
    }
}
import { UserConfigExport, ConfigEnv } from 'vite'

import { viteMockServe } from '@gauss/vite-plugin-mock-server'
import vue from '@vitejs/plugin-vue'

export default ({ command }: ConfigEnv): UserConfigExport => {
    return {
        plugins: [
            vue(),
            viteMockServe({
                mockPath: './src/mocks',
                localEnabled: command === 'serve',
            }),
        ],
    }
}

viteMockServe ​

ts
{
    mockPath?: string;
    ignore?: RegExp | ((fileName: string) => boolean);
    localEnabled?: boolean;
    logger?:boolean;
}
{
    mockPath?: string;
    ignore?: RegExp | ((fileName: string) => boolean);
    localEnabled?: boolean;
    logger?:boolean;
}

mockPath ​

  • type: string
  • default: mock

设置模拟.js 文件的存储文件夹

ignore ​

  • type: RegExp | ((fileName: string) => boolean)
  • default: undefined

自动读取模拟.js 文件时，请忽略指定格式的文件

localEnabled ​

  • type: boolean
  • default: command === 'serve'

设置是否启用本地 xxx.js 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能

logger ​

  • type: boolean
  • default: true

是否在控制台显示请求日志

Mock file example ​

参考文档：http://mockjs.com/examples.html

js
// /src/mocks

import { useMock } from '@gauss/vite-plugin-mock-server/hook'
const mock = useMock()

// 列表
mock.post('/api/page').response(request => {
    const { type } = request.body
    return mock.page(request.body).generate(
        {
            id: '@id',
            name: '@csentence(3, 10)',
            createTime: '@datetime("T")',
            type: type || /[1-2]/,
        },
        98,
    )
})

// 注册
export default mock.setup()
// /src/mocks

import { useMock } from '@gauss/vite-plugin-mock-server/hook'
const mock = useMock()

// 列表
mock.post('/api/page').response(request => {
    const { type } = request.body
    return mock.page(request.body).generate(
        {
            id: '@id',
            name: '@csentence(3, 10)',
            createTime: '@datetime("T")',
            type: type || /[1-2]/,
        },
        98,
    )
})

// 注册
export default mock.setup()

useMock ​

js
import { useMock } from '@gauss/vite-plugin-mock-server/hook'
const mock = useMock()

// 注册
export default mock.setup()
import { useMock } from '@gauss/vite-plugin-mock-server/hook'
const mock = useMock()

// 注册
export default mock.setup()
方法说明入参
mock.api自定义 api 模拟参考 Opt
mock.get模拟 GET 请求void(url, opt = {})
mock.post模拟 POST 请求void(url, opt = {})
mock.timer延迟请求void(t = 0)
mock.data模拟数据参考 mockjs.mock
mock.datetime模拟时间void(cmd), 参考 mockjs.Random.datetime(cmd)
mock.random模拟随机数void(keyname), 参考 mockjs.Random[keyname]()
array模拟数组void(data: any): { need(n = 10): any }
page模拟分页void(params = {}): { generate(data: any, total = 0): any }

Opt ​

ts
{
  // 请求地址
  url: string;
  // 请求方式
  method?: MethodType;
  // 设置超时时间
  timeout?: number;
  // 状态吗
  statusCode?:number;
  // 响应数据（JSON）
  response?: ((opt: { [key: string]: string; body: Record<string,any>; query:  Record<string,any>, headers: Record<string, any>; }) => any) | any;
  // 响应（非JSON）
  rawResponse?: (req: IncomingMessage, res: ServerResponse) => void;
}
{
  // 请求地址
  url: string;
  // 请求方式
  method?: MethodType;
  // 设置超时时间
  timeout?: number;
  // 状态吗
  statusCode?:number;
  // 响应数据（JSON）
  response?: ((opt: { [key: string]: string; body: Record<string,any>; query:  Record<string,any>, headers: Record<string, any>; }) => any) | any;
  // 响应（非JSON）
  rawResponse?: (req: IncomingMessage, res: ServerResponse) => void;
}

注意事项 ​

  1. 无法在 mock.js 文件中使用 node 模块，否则生产环境将失败
  2. 模拟数据无法用于生产环境，仅适用于某些测试环境。 不要在正式环境中打开它，以避免不必要的错误。 同时，在生产环境中，它可能会影响正常的 Ajax 请求，例如文件上传/下载失败等。

Contributors ​

wei.zhouu

Copyright © 2023-present Gauss