vite-plugin-apits2mock

apits2mock

简体中文

Interface Mocking for apits generated from openapi on Vite.

使用方式

See demo

Best served with vite-plugin-swagger2ts

1. Define interfaces in a specified folder.

Data simulation is done using mockjs, where comments can be used to process templates generated by interfaces.

Comment Type	Corresponding Mockjs	Description
description	-	Comments with ~debug will print the generated mock templates for inspection
format	Data Placeholder	Mockjs placeholders, e.g., ~name, ~date, etc. Since there's a conflict between the @ character in Mockjs templates and the @ character in comments, the @ in data templates needs to be replaced with ~
pattern	Generation Rule	Indicates Mockjs generation rules, e.g., +1, 10-20, etc.

Mockjs Syntax Introduction

// request/interfaces/xxx.ts

export default interface JuHeInterface {
  '/toutiao/index': {
    /**
     * @description description Comments with ~debug will print the generated mock templates for inspection
     */
    get: {
      // Request parameters, fixed type, optional
      // TODO Add interface type validation
      param: {
        query: {
          type: 'top' | 'guonei' | 'guoji' | 'yule' | 'tiyu'
          page: number
          page_size: number
          is_filter: 1 | 0
        }
      }
      // Required response content
      response: {
        /**
         * @description format Comments indicate Mockjs placeholders, e.g., ~name, ~date, etc.
         * @format ~integer(10)
         */
        page: number
        /**
         * @format ~integer(10)
         */
        pageSize: number
        /**
         * @description pattern Comments indicate Mockjs generation rules, e.g., +1, 10-20, etc.
         * @format ~name
         * @pattern 2
         */
        stat: string
        data: {
          uniquekey: string
          title: string
          date: string
          category: string
          author_name: string
          url: string
          thumbnail_pic_s: string
          is_content: string
        }[]
      }
    }
  }
}

2、Configure the plugin

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import TS2Mock from 'vite-plugin-apits2mock'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    TS2Mock([{
      // Target folder address, where all interfaces that can be parsed will become templates
      dir: 'src/request/interfaces',
      // URL prefix, when used with the development proxy server, can simulate interfaces that the proxy reports errors for
      prefix: '/api',
      // Unified interface packaging, add a unified return package format for interfaces. This part of the type definition can be removed when defining interfaces.
      wrapper: {
        error_code: '@integer(10,200)',
        reason: '@string',
        // Types defined in the folder will be replaced here
        result: '@Interface',
      },
      custom: {
        // Properties are concatenated in the format method__pathname, with dynamic paths starting with :
        // Data that can be directly serialized to JSON
        'get__/user/:id': {
          id: '1',
          name: 'Jobs'
        },
        // Functions can be used to return data
        'get__/menu/:id': () => {
          return {
            id: Math.floor(Math.random() * 100),
            name: 'User Management'
          }
        }
      }
    }]),
  ],
  resolve: {
    alias: { '@/': '/src/' },
  },
  server: {
    proxy: {
      // When consistent with TS2Mock configuration prefix, modify the proxy configuration in the configure function, listen for proxy events, and handle data simulation
      '/api': {
        target: 'https://apis.juhe.cn/',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
})

License

MIT License © 2023-PRESENT Morelearn