记录生成mock数据的一天

1、初始化Vue项目

2、安装mock-service-plugin

npm i mock-service-plugin --save-dev

3、项目根目录下创建 mock 数据文件夹 mocks 如下图

 

4、mock-service-plugin 初始化配置

// vue.config.js

const MockServicePlugin = require('mock-service-plugin');
module.exports = {
configureWebpack: {
plugins: [
// 初始化插件
new MockServicePlugin({
path: path.join(__dirname, './mocks'), // mock数据存放在 mocks 文件夹中
port: 9090 // 服务端口号
})
]
}
}

5、在mocks文件夹下创建对接的文件夹，文件夹下创建Json文件，为了便于查找，建议Json文件名使用接口名称，比如我是这么写的

 json文件内容如下，@url是必须的

/**
 * @url /account/getUserInfo
 */
{
  "code": 200,
  "data": {
    "realName": "@cname",
    "id": "@guid",
    "userName": "@name",
    "email": "@email",
    "orgName": "@city"
  },
  "message": "success"
}

6、启动项目

 访问这个地址，就可以看到mock的接口列表以及每个接口对应的Json数据

 如果看到上面的页面说明我们 mock 服务搭建成功了,接下来只要把请求发送到 mock 服务器上就可以了