vite-plugin-dev-mock ​

const VitePluginDevMock = (options?: UserOptions) => {
  let entry = options?.entry || './mock/index.js'

  // 没有绝对路径转为绝对路径
  if (!path.isAbsolute(entry)) {
    entry = path.resolve(process.cwd(), entry)
  }

  return {
    name: 'vite-plugin-dev-mock',
    apply: 'serve',
    configureServer: async (server: ViteDevServer) => {
      // 获取路由配置信息
      const mockRoutesObj = await getMockRoutesObj(entry);
      if (!mockRoutesObj) {
        return
      }
      // 生成路由映射
      generateRouteMap(mockRoutesObj)
      // 添加中间件
      server.middlewares.use((req, res, next) => {
        // 匹配路由
        const route = matchRoute(req)
        if (!route) {
          return next()
        }
        // 对匹配到的路由进行处理
        const newRes = res as MockServerResponse
        newRes.send = (body: object) => {
          let chunk: string | Buffer = JSON.stringify(body)
          if (chunk) {
            chunk = Buffer.from(chunk, 'utf-8')
            newRes.setHeader('Content-Length', chunk.length)
          }
          newRes.setHeader('Content-Type', 'application/json')
          newRes.statusCode = 200
          newRes.end(chunk)
        }
        route.handler(req, newRes)
      })
    }
  }
}

export {
  VitePluginDevMock
}

export default VitePluginDevMock

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginDevMock from '@m-f2e/vite-plugin-dev-mock'

export default defineConfig({
  plugins: [
    vue(), 
    // 默认为./mock/index.js
    VitePluginDevMock()
    // 或者自定义目录
    VitePluginDevMock({ entry: './mock/index.js' })
  ],
})

http://localhost:3000/api/users