Vite项目中如何进行数据mock

背景介绍

在平时的项目开发中，基本上都采用前后端分离的开发模式。因此，像 react、vue、webpack这些框架和工具发展火热，在这样的大背景下，前端的开发者承担着更多的工作，不再像以前一样合个页面，写点js就把模板交给后端集成了，现在后端的工作基本与页面无缘，只提供接口，所有的页面交互和业务逻辑都在前端实现。

不得不吐糟的痛点

因为前后端分离的实现，往往项目为了赶工期，前端和后端一起开发，然后联调。这时就存在一个问题，由于很多团队没有特别的规范或规范没有严格落实，api接口往往只有后端开发完了才出来，前端写接口请求和相关处理逻辑的任务占的比重比较高，尤其是在一些业务逻辑复杂的项目中。等到联调时才写估计来不急，那如何在接口没有提供之前顺利完成逻辑代码编写呢！答案是：利用mock数据生成模拟数据。

Vue3.0开发脚手架vite模拟数据的实现

vue3.0正式版本已经发布一个月了，笔者也尝试了一下，真的非常推荐使用。顺便带火的还有新一代的开发神器vite，秒速启动，热更新快，开发体验要比webpack好太多。闲话少说，来研究一下vite中如何实现mock数据吧。

在vite的配置文件 vite.config.js 或 vite.config.ts 中：

export default {
  // ...
  configureServer: function({ app }){
    app.use(async (ctx, next)=>{
      if(ctx.path == '/api/')
      ctx.body = {msg: '1231231'}
      await next()
    })
  }
}

Vite内部是基于 koa做的web服务，所以传递的app对象就可以直接在上面使用koa的中间件。好了，启动，打开 http://localhost:3000/api/, 没有错误的话应该会出现你想要的数据。

使用插件实现数据模拟

上面的方法我们实现模拟数据的入口途径，但也存在很多蹩脚的问题，比如如何管理多个路由和数据，还有就是上面的方法改变了数据还得重启服务，这显然不满足开发效率的需要。这里推荐使用一款api插件，具体用法如下：

安装依赖
```
npm i -D apite
```

配置插件

import { viteExt } from 'apite'
export default {
	// ...
	configureServer: [viteExt({
		// apite config
	})]
}

在项目根目录新建 api 目录，添加index.js

const { api, delay, mock, resp } = require('apite')

// JSON
api.get('/json', {  msg: 'json'})

// POST
api.post('/post', ctx=> {  ctx.body = ctx.post})

运行项目，打开 http://localhost:3000/api/ 【在线示例】

你可以实时修改api接口，实时生效，这个插件还能直接生成一个文档页，将注释直接转化为标准化的文档。另外还有一个笔者认为很不错的功能就是在线调试，对于api接口而言，get请求还好，直接打开就可以看到数据，但post就要自己写代码或者借助postman等工具去验证了。这个插件生成的文档页面里直接可以在线调接口。更多用法请参考 apite文档

结语

我是一名前端架构师，关注我，别忘了点个赞哦。有什么疑问欢迎在下方评论区留言，广交天下豪杰。