vite-plugin-mock，在Vite项目中模拟数据（超简单超方便）

前言

我们做项目的时候，经常会遇到以下两种情况：

1.开发时，后端还没有写好接口和数据，前端需要先开发着；

2.测试时或开发时，想要换不同的数据来查看不同的效果，但不方便让后端同事或者测试同事配合一直改数据。

这个时候，前端自己模拟数据就非常重要了。最常见的方法就是用mockjs，不过vite-plugin-mock插件会让模拟数据更加方便！

安装

pnpm i  mockjs vite-plugin-mock -D

使用

1、vite.config.ts配置

import { UserConfigExport, ConfigEnv } from 'vite'

import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'

export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    ...
    plugins: [
      vue(),
      ...
      {
        ...viteMockServe(),
        apply: 'serve' // 开发时应用
      }
      // 或者这么写
      viteMockServe({
        localEnabled: command === 'serve' // 开发时应用
      }),
    ],
  }
}

2、项目根路径下新建mock文件，里面再新建文件书写返回的数据，例如mock/test.ts

import { MockMethod } from 'vite-plugin-mock'
export default [
  {
    url: '/api/tset', 
    method: 'get',
    response: () => {
      return {
        status: true,
        code: 200,
        message: '成功',
        data: {
          is_open: true,
        }
      }
    }
  }
] as MockMethod[]

搞定！就这么简单。

不需要再配置什么其他的，只要发送的请求地址是mosk文件里面的地址，就会自动变成mock里面的数据而不是后端传回的数据。所以如果在开发阶段不需要使用mock，就直接把相应的mock文件里export default里面的内容注释掉就好了。