React+ts+vite脚手架搭建（四）【mock篇】

寻找光_sxy
232 阅读3分钟

前言

上一篇我们介绍了状态管理，可以移步：React+ts+vite脚手架搭建（三）【状态管理篇】

本文我们将介绍mock，想象一种场景，我们和后端一起做一个需求，我们嗖嗖很快地完成了交互的开发，一切都等着后端接口联调了，结果一问后端接口还没写......

9fe2aa9f3996496e7a6a97a74fde8e79.jpg

此时我们就需要祭出mock大法了，只需要问后端要一下接口的url的地址和数据接口我们就可以安心了

image.png

我这里用的是vite-plugin-mock和mockjs

具体步骤

下载依赖

第一步依然是下载依赖，这次只需要下载两个依赖：

yarn add vite-plugin-mock mockjs

建立mock文件且初始化

接着在根目录下新建立一个文件夹mock/index.ts

image.png

这里通过引入vite-plugin-mock中的MockMethod来实现

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

const apiMock: MockMethod[] = [
    {
      url: "/mock/userInfo",
      method: "get",
      response: () => {
        return {
          code: 0,
          data: {
            name: "寻找光_sxy",
            age: 18
          },
          "msg": "success"
        }
      },
    },
  ];
  
  export default apiMock;

修改vite.config.ts

之后在vite.config.ts添加viteMockServe插件，配置mock服务且指定了模拟数据文件的存放目录路径（注意：路径要写对）

image.png

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

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

添加mock运行模式

最后在package.json文件里还要添加mock模式，用于在启动项目时用mock调试

image.png

......

"scripts": {
    "mock": "vite --mode mock",
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

......

使用

上面我们已经基本上把mock使用的基础条件搭建完成了，还是比较简单的，下面将介绍如何在实际场景中应用

运行mock模式

首先我们先yarn mock，将项目运行起来

mock一个接口

这里我们可以将接口篇中的接口修改一下：

image.png

export function getUserInfo(): Promise<any> {
  return http({
    url: "/mock/userInfo",
    method: "GET",
  });
}

这里要注意url和method都要写正确，否则会报错404

之后启动项目就会看到已经可以正常请求了

image.png

踩坑

node版本

没错在刚开局下载依赖的时候就开始报错了： image.png 原因是因为执行了yarn add mockjs，但是mockjs需要node的版本>=20，所以你可以选择提升自己的node版本在20以上或者执行yarn add mockjs --ignore-engines忽略版本检查

总结

mocks是为了解决后端接口未就绪时，我们进行独立的前端功能开发，可以提升效率，它上手简单，语法直观，可以快速模拟数据，也可以拦截请求，模拟接口交互逻辑，但是它也有一定的缺陷，比如无法模拟真实的服务端逻辑，对于复杂的业务场景，权限校验，两个接口间的数据关联等等，配置成功较高，大家可以结合自己的具体场景应用。

我在实际的开发中遇到的最大的问题是，得实时的维护mock数据，尤其在多人开发时，某一个版本迭代中数据格式变化较大，且对应的开发人员并没有更新mock数据，那么一运行yarn mock因为数据格式不兼容导致的页面崩溃或者白屏很痛苦。

下一篇：React+ts+vite脚手架搭建（五）【规范篇】

avatar
文章
阅读
粉丝