使用vite-plugin-fake-server 线上部署使用mock

怪大叔95272024-09-09

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

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

1. 安装

npm i vite-plugin-fake-server -D

2. 引入

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

// vite.config.ts
import { defineConfig } from 'vite'
import { vitePluginFakeServer } from 'vite-plugin-fake-server'

export default defineConfig({
  plugins: [
    vitePluginFakeServer({
      include: 'mock', // 设置目标文件夹，将会引用该文件夹里包含xxx.fake.{ts,js,mjs,cjs,cts,mts}的文件
      enableProd: true // 是否在生产环境下设置mock
    }),
  ],
})

3. 使用

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

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

// mock/user.js
import { faker } from '@faker-js/faker' // 这里我使用了@faker-js/faker，也可以使用mockjs或者直接假数据

export default [
  {
    url: '/api/auth/login',
    method: 'post',
    response(req) { // 支持参数，url参数是query，body参数放body，不懂的可以打印一下req
      const { username, password } = req.body
      if (username === 'admin' || password === '123456') {
        return {
          code: 200,
          data: faker.string.uuid(),
          msg: '登录成功'
        }
      } else {
        return {
          code: 400,
          msg: '帐号或密码错误'
        }
      }
    }
  },
  {
    url: '/api/auth/login',
    method: 'post',
    response() {
      return {
        code: 200,
        msg: '退出成功'
      }
    }
  },
  {
    url: '/api/auth/userInfo',
    method: 'get',
    response() {
      return {
        code: 200,
        data: {
          name: faker.name.fullName(),
          avatar: faker.image.avatar(),
          email: faker.internet.email(),
          phone: faker.phone.number(),
          address: faker.address.streetAddress()
        }
      }
    }
  }
]

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

import { defineFakeRoute } from 'vite-plugin-fake-server/client'
import user from './user'
import common from './common'

export default defineFakeRoute([...user, ...common])

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