VueCli3.0中的MockApi集成是前端开发者在开发过程中模拟后端API数据的一种高效工具，尤其在后端接口尚未开发完毕或者接口变更频繁的情况下，它能够极大地提升开发效率和降低沟通成本。本文将详细介绍如何在VueCli3.0环境中集成MockApi，并探讨MockApi的概念、应用场景、优缺点以及本地Mock接口的实现。
一、MockApi的使用场景
在实际开发中，前端开发者往往需要等待后端接口的完成才能进行完整的功能开发。MockApi则允许前端在不依赖后端的情况下，直接使用模拟的数据进行开发。例如，当新的需求到来，但现有接口还未完善时，前端可以通过MockApi快速构建出原型，以便尽早进行功能验证和设计优化。
二、MockApi的概念
1. Mock的描述：Mock接口是为开发环境提供的模拟真实接口，它能提供假数据，甚至有时是真实数据，以应对后端接口无法及时跟进的情况。在Vue项目中，通过MockApi，前端可以独立于后端开发，保持良好的开发流程。
2. Mock能解决的问题：MockApi减少了额外的工作，如手动创建模拟数据、调试和删除无用代码。通过Mock，前端可以在联调时直接切换到真实的API地址，无需改动大量代码。
三、Mock的几种方式及其优缺点
1. 本地Mock接口：优点是可以精确控制Mock的内容，缺点是增加了本地代码量，需要配置webpack。
2. 使用Mock.js实现ajax拦截：优点是数据更丰富，但需额外的本地配置。
3. 后端Controller的静态JSON：优点是联调无需改动，缺点是修改Mock内容需与后端沟通。
4. FastMock模拟动态Restful API：优点是内容可控且支持动态接口，缺点是可能需要针对接口转发做特殊处理。
四、本地Mock接口操作
本文重点介绍本地Mock接口的实现，这通常涉及到Node.js的Express框架和VueCLI3.0的配置。你需要了解Express的基础知识，如路由设置和Node.js的fs模块。在Express中，你可以通过定义路由来返回模拟的JSON数据：
```javascript
const express = require('express');
const app = express();
app.use('/ajax-get-info', (req, res) => {
res.send({
"success": true,
"code": 0,
"data": {}
});
});
```
为了处理POST请求和动态内容，你需要使用`body-parser`中间件，但要注意，由于VueCLI的配置，这个中间件不能全局使用，而应在特定的Mock路由上使用，如下所示：
```javascript
const bodyParser = require('body-parser');
// 创建Mock路由
app.use('/mock', bodyParser.json(), (req, res) => {
// 根据请求体或参数返回模拟数据
});
// 启动服务器
app.listen(3001, () => console.log('Mock server running on port 3001'));
```
五、VueCLI3.0中的配置
在VueCLI3.0项目中，我们需要配置`vue.config.js`以使Mock服务器与Vue开发服务器协同工作。这通常涉及到`devServer`配置项，利用`http-proxy-middleware`库将特定的API请求转发到本地Mock服务器。
```javascript
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3001', // Mock服务器地址
pathRewrite: { '^/api': '' }, // 路径重写，去掉/api前缀
},
},
},
};
```
通过这种方式，前端在发送请求时，`/api`开头的URL会被转发到本地Mock服务器，从而实现Mock数据的无缝集成。
总结来说，集成MockApi到VueCli3.0项目中，可以帮助开发者在没有真实后端数据的情况下进行开发，提高工作效率。通过本地Mock接口的方式，我们可以灵活地创建和管理模拟数据，减少与后端的沟通成本。同时，VueCLI3.0提供了方便的配置选项，使得MockApi的集成变得简单易行。
