vite-plugin-mock 2.3.0版本使用
时间: 2023-08-29 19:07:31 浏览: 63
vite-plugin-mock是Vite框架的一个插件,可以模拟接口数据,用于前端开发调试。在2.3.0版本中,该插件增加了对Mock.js 1.0的支持,并且对配置项进行了一些优化。
使用vite-plugin-mock 2.3.0的步骤如下:
1. 安装vite-plugin-mock
```
npm install vite-plugin-mock --save-dev
```
2. 在vite.config.js中引入vite-plugin-mock,并进行配置
```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import mock from 'vite-plugin-mock'
export default defineConfig({
plugins: [
vue(),
mock({
// mock配置项
})
],
// 其他配置项
})
```
3. 配置mock数据
可以在mock配置项中定义接口路径和对应的数据,也可以使用mockjs进行更加复杂的数据模拟。
```javascript
mock({
// 接口路径
'/api/user': {
// 响应数据
name: 'John Doe',
age: 28
},
// 使用mockjs生成数据
'/api/list': {
'list|10': [{
'id|+1': 1,
'name': '@cname',
'age|18-30': 20
}]
}
})
```
4. 在前端代码中使用接口地址
在前端代码中使用接口地址时,可以直接使用定义好的路径。
```javascript
// 发送GET请求,获取用户信息
const user = await fetch('/api/user').then(res => res.json())
// 发送POST请求,提交表单数据
const data = { name: 'John', age: 30 }
const result = await fetch('/api/form', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(res => res.json())
```
以上就是vite-plugin-mock 2.3.0版本的使用方法。需要注意的是,该插件只在开发环境下生效,打包后的代码不会包含mock数据。