umi-mock-middleware是从umi代码中单独摘取出了mock中间件相关的独立代码,使之可以在React之外的环境,比如Vue中使用。功能更独立,更专一,使用更方便。
如果想了解更多umijs的信息,请移步umijs官网,同时感谢umi对开源事业的贡献。
npm install umi-mock-middleware
以Vue CLI3为例,首先注册中间件,修改vue.config.js,如果没有在项目根文件夹下新建一个,关键代码如下:
const path = require("path");
const { createMockMiddleware } = require("umi-mock-middleware");
module.exports = {
devServer: {
before: app => {
if (process.env.MOCK !== "none" && process.env.HTTP_MOCK !== "none") {
app.use(createMockMiddleware());
}
}
}
};
在项目根文件夹下创建 .umirc.mock.js
,示例代码如下:
module.exports = {
...require("./mock/index"),
// 这里可以引入任意的mock文件,位置也随意。
};
在项目根文件夹下创建mock文件夹,在其中创建index.js,位置和文件名无所谓,在 .umirc.mock.js
中引用即可。
module.exports = {
// 以HTTP动词和URL为Key,映射一个处理句柄。
[`GET /index`](req, res) {
// 返回你的mock数据。比如:
res.json({
success: true
})
}
};
到此你的mock数据已经可以访问了,当修改mock数据的时候,中间件会自动刷新,无需重启。