之所以要实现mock
是当后台接口没有完成
或者说要篡改后台接口的数据时（模拟接口）
由于国内的一些第三方mock工具容易挂掉 所以我们可以自己搭建搭建mock服务器
mock就是
可以通过本地的端口模拟 api得到的数据
使用vite-plugin-mock创建mock服务器
https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md
1.我们需要先引入下载
npm i mockjs -S
npm i vite-plugin-mock -D
2.需要改变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({
// default
mockPath: 'mock',
localEnabled: command === 'serve',
}),
],
}
}
3.需要创建一个mock文件 在里面添加test.ts
// test.ts
import { MockMethod } from 'vite-plugin-mock'
export default [
{
url: '/api/get',
method: 'get',
response: ({ query }) => {
return {
code: 0,
data: {
name: 'vben',
},
}
},
},
{
url: '/api/post',
method: 'post',
timeout: 2000,
response: {
code: 0,
data: {
name: 'vben',
},
},
},
{
url: '/api/text',
method: 'post',
rawResponse: async (req, res) => {
let reqbody = ''
await new Promise((resolve) => {
req.on('data', (chunk) => {
reqbody += chunk
})
req.on('end', () => resolve(undefined))
})
res.setHeader('Content-Type', 'text/plain')
res.statusCode = 200
res.end(`hello, ${reqbody}`)
},
},
] as MockMethod[]
这样我们就完成了
通过我们本地的localhost.5173来进行模拟一个mock接口 通过模拟这个接口 可以得到不同状态下的结果
