Vue CLI 3.0脚手架如何在本地配置mock数据

前后端分离的开发模式已经是目前前端的主流模式，至于为什么会前后端分离的开发我们就不做过多的阐述，既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段。

我们在开发的过程中，由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目，这样会使我们的前后端会同时的进行，提高我们的开发效率。

因为最近自己在自学 Vue 也在自己撸一个项目，肯定会遇到使用数据的情况，所以就想着如何在前端做一些 mock 数据的处理，因为自己的项目使用的是 vue/cli 3.0 与 vue/cli 2.0 的使用有一些的不同，所以在这里记录一下。

注意：本文主要说的是如何配置本地静态文件的 mock 数据的方式

首先我们来说一说vue/cli 3.0 与 2.0 的一些不同：

1. 3.0 移除了 static 文件目录，新增了 public 目录，这个目录下的静态资源不会经过 webpack 的处理，会被直接拷贝，所以我们能够直接访问到该目录下的资源。
2. 3.0 移除了 config、build 等配置目录，如果需要进行相关配置我们需要在根目录下创建 vue.config.js 进行配置即可。

• 2.0 的文件结构
  
• 3.0 的文件结构
  

可以看到 3.0 版本的