文章目录

1. 一，背景
2. 二，什么是 mock？
3. 三，vite-plugin-mock 使用实例
4. 参考文章：

一，背景

这篇文章我会给大家讲的几个问题如下：

• 什么是 mock?
• vite-plugin-mock 使用实例
• 其他 mock 方式

二，什么是 mock？

mock 英文有模拟的意思，我的理解是模拟数据。

大家开发的时候可能都知道会有接口文档吧，在接口文档里我们前后端约定好数据的字段和格式，之后分别进行开发。但是前后端的开发进度是不同步的，有时候我们的前端早就开发好了网页，这时我们想调用一下接口看看数据呈现情况但是发现后端还没开发好，所以这时我们就可以进行一下 mock，模拟一下数据尽早看到数据呈现状况。

mock 的方式有很多，而且前后端都有 mock。这里只介绍前端的一种 mock 方式。

通过 vite 插件 vite-plugin-mock 来配置。

三，vite-plugin-mock 使用实例

1，开一个 vite 项目

npm create vite@latest
#进入项目文件夹
npm i
npm i mockjs vite-plugin-mock -D
npm i axios  #用来测试

2，配置项目功能

//vite.config.ts
import { UserConfigExport, ConfigEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', //模拟.ts文件的存储文件夹，基于根目录
        watchFiles: true, //监视mock文件夹的更改并实时同步到请求结果
        localEnabled: command === 'serve', //本地打开mock开关
        logger: true, //是否在控制台显示请求日志
      }),
    ],
  }
}

//mock/mock.ts
import { MockMethod } from 'vite-plugin-mock'
const myData = {
  name: 'lzz',
  age: '20',
}
export default [
  //其他像带参数和非形式的请求模拟可以看文档
  {
    url: '/mock/api/get',
    method: 'get',
    timeout: 120,
    response: {
      status: 'success',
      data: myData,
    },
  },
] as MockMethod[]

//改一下helloworld.vue,将按钮改成一个函数，就可以在控制台看结果啦
function getData() {
  axios.get('/mock/api/get').then((res) => {
    console.log(res)
  })
}

参考文章：

vite-plugin-mock 入门：https://juejin.cn/post/7086708577104035876

vite-plugin-mock 文档：https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md