使用插件vite-plugin-mock
1、安装插件:
node version: >=12.0.0
vite version: >=2.0.0
npm i mockjs -S
npm i vite-plugin-mock -D
2、开发环境使用:
开发环境是使用 Connect 中间件实现的。
与生产环境不同,您可以在 Google Chrome 控制台中查看网络请求记录
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({
mockPath: 'mock',
enable: true,
}),
],
}
}
mock文件示例
/path/mock/test.ts
import { MockMethod, MockConfig } 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[]
export default function (config: MockConfig) {
return [
{
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}`)
},
},
]
}
然后在组件中写正常请求方法就ok。
插件bug:
1、路径不支持 /user/info.* 类似格式。
如果你的mock数据有类似格式,项目可能报错,跑不起来。