详解vue-cli 本地开发mock数据使用方法

2020-06-13 10:39:16易采站长站整理

vue-cli 中可以通过配置 proxyTable 解决开发环境的跨域问题,具体可以参考这篇文章:Vue-cli proxyTable 解决开发环境的跨域问题

如果后端接口尚未开发完成,前端开发一般使用mock数据。

mock方法有多种多样,这里给出两种:

方法一: 使用express搭建静态服务

mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上。

具体方法:

创建

mock 
文件夹

build/dev-server.js
中添加如下代码

npm run dev 启动后,可以通过 http://localhost:8080/mock/db.json 访问数据,proxyTable对应设置代理即可(代理设置方法与解决跨域方法相似)

方法二 使用 JSON Server 搭建 Mock 服务器

JSON Server 是一个创建伪RESTful服务器的工具,具体使用方法可以看官方文档,这里直接讲在vue-cli 中的用法。

配置流程

全局安装

$ npm install -g json-server

项目目录下创建

mock 
文件夹

mock 
文件夹下添加
 db.json 
文件,内容如下


{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}

package.json
添加命令


"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"

启动 mock 服务器

$ npm run mock 
命令 运行 mock server

访问 http://localhost:3000/

发现

db.json 
下第一级 json 对象被解析成为可访问路径

GET请求具体路径 如:http://localhost:3000/posts 可获取数据

faker.js 批量生成伪数据

如果需要大量的伪数据,手动构造比较费时费力,可以使用faker.js 批量生成。faker.js 的具体使用参见官方文档,这里做一个示例。

$ cnpm install faker -G 
全局安装 faker

mock