一、前言

当我们在日常开发业务中，经常遇到前端刷刷刷的完成了业务需求，却苦苦等不来后端的接口的情况，这时候，我们就不得不自己mock一下数据了，但是mock方案那么多，那么我们该如何选择自己的合适方案呢？

这里我向大家分享一下关于我的一种方案，也就是今天的主角：vite-plugin-mock

二、正文

当我们的项目是使用vite搭建的时候，我们就可以使用它了

首先第一步先把它下载下来：

yarn add vite-plugin-mock

第二步：然后下载mockjs

yarn add mockjs

第三步：在根目录建立一个新的文件夹mock 然后在其建立子文件，比如index.ts

import { MockMethod } from "vite-plugin-mock";

const apiMock: MockMethod[] = [
    {
      url: "/nihao/mock",
      method: "get",
      response: () => {
        return {
          code: 0,
          data: {
            mock: '你好，我是mock'
          },
          "msg": "success"
        }
      },
    },
  ];
  
  export default apiMock;

第四步：修改vite.config.ts文件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteMockServe } from "vite-plugin-mock";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    port: 3000,
  },
  
  plugins: [
    react(),
    viteMockServe({
      mockPath: "mock",
    }),
  ],
})

第五步：应用

useEffect(() => {
    axios.get('/nihao/mock').then((res) => {
      console.log('res: ', res);
    })
  }, [])

三、总结

mock方案多种多样，莫要乱花迷人眼，适合自己的最重要！！！

mock方案：vite-plugin-mock，我看行？

一、前言

二、正文

三、总结