推荐工具vite-plugin-fake-server,可线上部署使用mock

902 阅读2分钟

mock线上部署

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

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

  1. 安装
npm i vite-plugin-fake-server -D
  1. 引入

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

// 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
    }),
  ],
})
  1. 使用

这里我根据个人习惯,在mock文件夹下创建一个index.fake.js和数个模拟数据文件,比如user.jscommon.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来实现线上前端模拟的数据的方法了,感谢大佬。这个库还有更多的玩法,我这里就不展开了,最后贴上官网的示例地址