前言
本篇主要介绍mock数据插件的使用。
上一篇传送门
场景
在前后端分离的开发场景中,通常会存在这么一个问题,后端接口还未开发完成,前端已经写好了页面,需要等待后端兄弟给出接口及接口文档之后,才能继续开发联调。
为了解决这个问题,现在前端可以通过mock数据的方式模拟后端接口提前进行接口调试,等待后端接口开发好以后切换过去进行测试联调。
安装mock
npm install mockjs vite-plugin-mock cross-env -D
修改package.json
{
"scripts": {
// 修改dev命令
"mock": "cross-env NODE_ENV=development vite"
...
}
}
修改vite.config.js
import { viteMockServe } from "vite-plugin-mock"
plugins: [
vue(),
viteMockServe({
supportTs: false,
mockPath: 'src/mock' // mock默认根目录,如果放置在其他目录下,通过此参数指定路径
})
]
创建mock数据
# 在根目录下创建mock文件夹,然后创建index.js
export default [
{
url: '/api/login',
method: 'post',
response: () => {
return {
code: 200,
message: 'success',
data: {
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJhdhwIjoxNjI3NTMxNjcwfQ'
}
}
}
}
]
调用API请求
<template>
...
axios.get('/api/login').then(res => {
console.log(res)
})
...
</template>
下一篇计划
计划写一写用户登录和权限管理方面的内容。