Vue-cli 返回本地模拟数据的两种方法

当我们使用vue-cli开发项目的时候， 我们会使用一些， 模拟数据（自己定义的数据）来作为接口请求过来的数据
在vue-cli 4 的版本有两种做法
一种是 把模拟数据写在 public 文件夹中， 使用 axios, 来请求数据， 因为vue-cli 的 devserver 是把public 目录， 做为访问的根目录的， 如果根目录中没有找到所要的资源， 才会去看有没有代理服务器
第二种， 就是自已配置一个 express 服务器， 配置一下请求的参数， 并且在 vue.config.js中 配置 代理服务器， 这种方法有点复杂

首先， 我们要安装 axios

先来说第一种。这种方式比较简单
因为， 我们开启的 devserver 本来就是一台服务器， 并且它的根目录是 public 目录， 所以我们使用 axios 请求的时候可以直接请求到public 目录下的资源

如图， 我们在 public/data.mydata.111.json 配置了一个数据
所以我们就可以在 组件中使用 axios 请求到这个资源

第二种方法， 比较复杂， 但是当后台真实接口出来以后， 更容易对接一些
这种方法 先引入 express , 创建一个服务器， 同时在 devserver 中配置一个 proxy 代理， 具体步骤如下

1 npm install express
2 在 vue.config.js 中修改