安装依赖

1. 首先我们创建一个vite项目

   pnpm create vite

2. 然后我们要进行依赖的安装

   pnpm add mockjs @types/mockjs

3. 随后我们开始编写插件

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import { type Plugin } from 'vite'
   import mockjs from 'mockjs'
   import url from 'node:url'
   
   const viteMockServer = (): Plugin => {
     return {
   
       name: 'vite-mock-server',
       configureServer(server) {
         //使用中间件来完成mock接口
         server.middlewares.use('/api/list', (req, res) => {
           //通过url.parse来获取参数对象
           const parseUrl = url.parse(req.originalUrl!, true).query
           //保证返回的数据被正常序列化
           res.setHeader('content-type', 'application/json')
           const data = mockjs.mock({
             'list|100': [
               {
                 'id|+1': 1,
                 name: parseUrl.keyword,
                 'address': '@county(true)'
               }
             ]
           })
           //将数据返回给前端
           res.end(JSON.stringify(data))
         })
       }
     }
   }
   
   export default defineConfig({
     plugins: [react(), viteMockServer()],
   })

4. 最后我们可以通过fetch来获取数据或者通过网页路由直接访问

  import { useEffect, useState } from "react"
  function App() {
    const [list, setList] = useState<{
      name: string,
      address: string,
      id: number
    }[]>([])
    useEffect(() => {
      const fetchData = async () => {
        const res = await (await fetch('/api/list?keyword=yujimaka')).json()
        setList(res.list)
      }
      fetchData()
    }, [])
    return <>
      {list.map(item => <div>
        {`${item.name}-${item.id}-${item.address}`}
      </div>)}
    </>
  }
  export default App