如何使用vue-cli配置异步请求以返回mock模拟数据？

本文共计1678个文字，预计阅读时间需要7分钟。

在前后端分离的开发过程中，前端开发过程中，页面数据通常都是静态的、未经过接口的。在给后端提供接口后，再替换为接口数据，以减少静态数据的依赖。

　　在前后端分离开发的过程中，前端开发过程中，页面的数据显示一般都是写死的静态数据，也就是没有经过接口，直接写死在代码中的，在后端给出接口后，再替换为接口数据，为了减少对接成本，mock就出现了。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发更加独立自主，不会被服务端的开发所阻塞。

　　网上有不少使用mockjs模拟数据的文章，但基本都是本地拦截请求返回数据，在network中没有发出任何的请求，本地调试起来很不好，只能通过console.log来调试。为了实现真正的异步请求，那么就需要真正的服务器接口，而在开发vue-cli项目时，本地开发运行启动命令后，实际就是启动了一个本地服务器，那么只要把接口地址都在本地服务器中配置并使用mock返回数据就可以实现真正的异步请求了，这样调试就和真正的请求一模一样了。

　　开始实现

　　因为是vue-cli项目，请先安装node和npm。

　　1、首先，需要全局安装vue-cli：

> npm install -g @vue-cli

　　2、创建vue-cli项目：

> vue create vue-mock

　　创建成功后进入项目根目录，运行npm run serve启动，应该可以成功访问vue示例页面　　

　　本示例使用的版本是vue-cli 4.5.13、vue3、webpack4，如果发现某个配置不生效，请留意是否已经被废弃。