最近遇到了个麻烦，后端迟迟给不了接口，测试那边又要求数据不能写死，必须可以提供mock调试。这不最近找到了一个mock工具，能解决传统mock工具无法线上部署的问题。

工具名字叫做vite-plugin-fake-server，兼容vite，从官网示例上来看是同时支持mockjs和@faker-js/faker来模拟数据的。使用起来也非常简单，分三步走就行。

1. 安装

复制 1npm i vite-plugin-fake-server -D

2. 引入

这里贴出最简单的配置，一个是制定文件夹，一个是设置在生产环境下模拟数据。

复制 1
 2import { defineConfig } from 'vite'
 3import { vitePluginFakeServer } from 'vite-plugin-fake-server'
 4
 5export default defineConfig({
 6  plugins: [
 7    vitePluginFakeServer({
 8      include: 'mock', 
 9      enableProd: true 
10    }),
11  ],
12})

3. 使用

这里我根据个人习惯，在mock文件夹下创建一个index.fake.js和数个模拟数据文件，比如user.js、common.js等。

首先是user.js，里面放模拟数据，并根据vite-plugin-fake-server的格式要求返回，如下：

复制 1
 2import { faker } from '@faker-js/faker' 
 3
 4export default [
 5  {
 6    url: '/api/auth/login',
 7    method: 'post',
 8    response(req) { 
 9      const { username, password } = req.body
10      if (username === 'admin' || password === '123456') {
11        return {
12          code: 200,
13          data: faker.string.uuid(),
14          msg: '登录成功'
15        }
16      } else {
17        return {
18          code: 400,
19          msg: '帐号或密码错误'
20        }
21      }
22    }
23  },
24  {
25    url: '/api/auth/login',
26    method: 'post',
27    response() {
28      return {
29        code: 200,
30        msg: '退出成功'
31      }
32    }
33  },
34  {
35    url: '/api/auth/userInfo',
36    method: 'get',
37    response() {
38      return {
39        code: 200,
40        data: {
41          name: faker.name.fullName(),
42          avatar: faker.image.avatar(),
43          email: faker.internet.email(),
44          phone: faker.phone.number(),
45          address: faker.address.streetAddress()
46        }
47      }
48    }
49  }
50]

其实是vite-plugin-fake-server的主体了。

复制 1import { defineFakeRoute } from 'vite-plugin-fake-server/client'
 2import user from './user'
 3import common from './common'
 4
 5export default defineFakeRoute([...user, ...common])

以上就是如何简单使用vite-plugin-fake-server来实现线上前端模拟的数据的方法了，感谢大佬。这个库还有更多的玩法，我这里就不展开了，最后贴上官网的示例地址。