现在很多前端项目都是前后分离的模式，开发时比较依赖接口数据，或者跑路后回顾项目也比较依赖接口数据。如果搭建一套后台系统来模拟数据接口又费时费力，因此mock数据比较方便快捷。

尝试了网上很多mock数据的方式,大体分为几种:

1.使用mockjs,优点是配置简单,缺点是在控制台看不到请求.只能console查看数据.Mockjs参考

2.使用express服务，模拟接口服务.优点是自由度高，可配置各种情况，能看到请求。缺点是配置较多，开发时多起了一套服务。express参考

3.使用json-server，模拟接口服务.优点是自由度高，可配置各种情况,能看到请求。缺点是开发时多起了一套服务。json-server参考

4.使用easy-mock工具，优点是成体系的独立mock工具，模拟后端接口。缺点是成本略高，独立于项目之外。

5.使用vuecli配置拦截axios请求，模拟数据.优点是配置简单，可以看到请求。本文也是记录介绍这种方法。

vuecli2版本的mock实现，网上有很多配置分享，本文主要总结vuecli3版本的配置方法。

在根目录创建mock目录

---mock       //mock目录
----modules   //存放数据目录
-----login.js //登录页相关数据
----mock-server.js   //mock配置文件

mock-server.js配置文件，合并所有mock,完成拦截配置

const requireContext = require('require-context');
const path = require('path')
const mockFiles = requireContext(path.join(__dirname,'./modules'),false, /\.js$/);
let mocks = [];
mockFiles.keys().forEach(key => {
  mocks.push(...mockFiles(key))
})
module.exports = app => {
    // 只有环境变量是mock的情况才会进入
    if (process.env.NODE_ENV === 'mock') {
        for(let i=0;i{
                res.json(mocks[i].data)
            })
        }
    }
}

login.js数据文件，几种保存了login页需要mock的数据

登录页主要有两个请求需要mock,获取公钥getpub,登录login。注意请求的method和url要和项目中axios的实际请求一致，返回数据可以根据项目的格式自由发挥.

let getpub = {
    method: "get",
    url: "/gateway/auth/unify/web/publicKey",
    data: {"message":"成功","statusCode":200,"success":true,"data":{"publicKey":"M***AQAB","timestamp":1612103071517}}
}
let login = {
    method: "post",
    url:"/gateway/auth/unify/web/login",
    data:{"message":"成功","statusCode":200,"success":true,"data":{"***"}}
}
module.exports = [
    getpub,
    login
]

完成以上的准备后，在vue.config.js文件中引入配置.

devserve = {
 before: require('./mock/mock-server.js')
}

增加mock环境变量.env.mock

NODE_ENV = 'mock'

完成以上所有准备后配置npm run mock命令，就可以开始了

"mock": "vue-cli-service serve --mode mock"

欢迎转载:转载时请注明本文出处及文章链接

昵称: 邮箱: 验证码:

提交评论