详解VueCLI3.0脚手架如何mock数据-创新互联

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

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

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

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

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

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

2.0 的文件结构

3.0 的文件结构

可以看到 3.0 版本的脚手架在项目结构上精简了很多，看上去没有那么的繁琐。接下来我就进行 mock 数据的配置，再说 3.0 之前，我们先看看 2.0 的时候我们都是怎么使用静态数据文件进行 mock 的。

2.0 配置

首先，在这个版本是只有我们的 static 目录下的文件是可以被访问到的，所以我们就把静态文件放入该目录下。

// 静态数据存放的位置
static/mock/home.json

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。