前端如何 Mock 数据，难易两种方法

前言：以 VUe3 + TS 为例（TS无非就多了一个类型校验）

有关 Mock 数据的必要性这里不再过多赘述，主要是为了开发时能够实现同步性。这里介绍两种方法

import axios from 'axios'
import Mock from 'mockjs'

onMounted(async ()=>{
    // 使用Mock.js来模拟数据
    Mock.mock('/patient/message/sys/list', {
        'list|10-20': [{
          'title': '@ctitle(10, 20)',
          'description': '@ctitle(30, 100)'
        }]
    })
    axios.get('/patient/message/sys/list').then((res)=>{
        console.log(res)
    })
})

这种 Mock 的方式虽然不需要将域名映射到本地，但是每次 Mock 某个请求时需要同时导入 mockjs 和 axios

显然，当接口开发完成之后，就得重新写有关请求的逻辑（虽然数据渲染部分不需要重写，但是远没有第二种方法中直接删除环境变量前缀来的简便）

而且这种 Mock 的方法是无法在网络请求列表看到相关请求的

相关文章 中也给出了结合 axios 进行 Mock 数据的方案，但是，那一种方法同样是需要将请求的域名更改为本地的

插件mock接口数据#

www.npmjs.com/package/vit…

1）安装 vite-plugin-mock mockjs

pnpm i vite-plugin-mock mockjs -D

2）使用插件扫描 src/mock 下文件(在 vite.config.ts 进行插件的配置，详细可见 vite 文档有关插件配置的部分)

import { viteMockServe } from 'vite-plugin-mock'

plugins: [
    viteMockServe({
      mockPath: './src/mock',
      localEnabled: true
    })
]

3）mock文件 src/mock/index.ts

import Mock from 'mockjs'

const rules = [
  {
    url: '接口地址',
    method: 'get',
    timeout: 1000,
    response: () => {
      const data = []
      for (let i = 0; i < 10; i++) {
        data.push(
          Mock.mock({
            id: '@id',
            title: '@ctitle(3,10)',
            createTime: '@datetime()',
            type: '@integer(1,3)',
          })
        )
      }
      return {
        code: 10000,
        message: '模拟数据成功',
        data
      }
    }
  }
]

export default rules

测试

request(import.meta.env.VITE_APP_CALLBACK + '/patient/message/list').then((res) => {
  console.log(res)
})

request 是我自己封装的请求函数（形参顺序：路径、请求方法（默认是 GET）、data/params(如果需要的话)）

使用注意：

• 这些mock接口是 vite 本地服务器提供的
• import.meta.env.VITE_APP_CALLBACK 是存储好的环境变量，将域名映射到本地服务器上，环境变量存该域名的值，这样再访问域名时其实访问的是本地资源
• 搞清楚一个问题，什么时候才需要mock数据。肯定是处于开发环境下、且后端没开发完毕的时候，所以我们可以将项目的域名映射到本地（如果不映射直接访问的话，如果对应域名还没开发完，访问时肯定是会报 404 错误的。但是将该域名映射到本地，再执行npm run dev时在本地跑起来，那么对应的域名也就能访问了）
• 有关域名映射的问题其实就是配置host文件，同时配置一下vite.config.ts

)

可以发现，通过第二种方法 mock 数据，当接口开发完毕时，我们就只需要将请求路径前面的 import.meta.env.VITE_APP_CALLBACK删除即可