概述

在公司的日常开发中，通常是前后端分离的架构模式。前后端各司其职互不干扰。但是，当后端的环境配置越来越复杂的时候，前端直接基于开发环境开发就有点费事了。

假如后端配置了 VPN 访问权限，还有各种权限校验，前端工程直接调用接口需要各种复杂的配置。首先是跨域问题，开发环境可能不接受 localhost:8000 域名下的请求，没法直接访问。这时候就需要 Fiddler 类似的请求拦截器软件，将你访问开发环境的页面的请求转发到你本地前端工程上，然后实现跨域访问。

虽然解决了跨域访问的问题，但是 Fiddler 这个软件总是不太稳定，总是有缓存问题。这样的话它总是拦截不到请求，搞得你半天都看不到页面修改的效果。

再来谈谈后端本身的问题。在一个微服务架构的系统中，通常请求最先经过网关，然后再转发到各个微服务上，其中整个链路上涉及到的节点非常多。假如有一个挂掉，那么本次请求就失败，对于前端需求开发那就很折磨人。因为你总是要频繁测试请求的接口，从而调试你的页面。

笔者就是总是碰到后端网关总是挂掉的情况，一挂就是一天，然后我的需求还会依赖后端的某些接口，这样我的开发就被阻塞了，体验十分不友好。

这时候，我们就需要本地来模拟接口了，给前端返回假数据。这样就不会依赖后端的接口，实际上依赖的接口可能在开发中，一时半会儿就算连接上了环境也调用不了。或者还有一种方法，那就是在线 mock 服务。比如使用 ApiPost 或者 ApiFox 等 API 服务可以开启线上 mock 服务，但是假如公司的信息安全管制比较严格的话，那就不要轻易使用了。

下面给大家介绍的就是一款 mock 插件：vite-plugin-mock，这款插件是专门为 Vite 构建工具设计的插件可以实现本地 mock 接口数据。

Quick Start安装配置

使用 pnpm 命令安装这个插件：

pnpm i mockjs vite-plugin-mock -D

然后在 vite.config.ts 文件中添加以下配置：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
    plugins: [
      vue(),
      viteMockServe({
        mockPath: './src/mock', // mock文件存放的位置
        enable: mode === 'mock' // 在 mock 模式中启用 mock
      })
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  })
)

这里 mockPath 指定了存放 mock 接口的文件夹。注意，这里不能使用 @/src/mock，因为在配置文件里面还不能识别 @ 符号，这还是加载配置的时候，@ 符号只能在 src 目录下用。

enable 字段指定了什么时候启用，当命令行参数的 mode 值为 mock 时才启用。

编写mock函数

在 src 目录下新建 mock 目录，创建 index.ts 文件。编写如下代码：

import { type MockMethod } from 'vite-plugin-mock'
const mocks: MockMethod[] = [
  {
    url: '/api/user',
    method: 'get',
    response: () => {
      return {
        code: 200,
        msg: 'OK',
        data: {
          username: 'Trump',
          age: 88
        }
      }
    }
  }
]
export default mocks

修改启动参数

在 package.json 文件中添加 mock 模式启动命令：

"scripts": {
  "mock": "vite --mode mock",
  // ...
},

发起一个简单的请求

在 App.vue 文件中写一个简单的 ajax 请求，然后渲染在页面上：

<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'
const user = ref({})
onMounted(async () => {
  const { data: res } = await axios.get('/api/user')
  user.value = res
})
script>
<style scoped>
style>

可以看到请求正常地发送了，然后也拿到了响应的数据。假如有其他的接口需要模拟，那么也如法炮制，这样大大地提高了我们的开发效率，可以早点下班啦。