前言
我们做项目的时候,经常会遇到以下两种情况:
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里面的内容注释掉就好了。