在webpack挂载Mock,便于开发中debug
下面这是运行起来的页面,这里可以看到API请求后的response,也可以设置status来选择命中不同的response,设置timeout让API模拟延时。
下面是添加在 package的devDependencies mock的github地址 "mock": "git+https://github.com/huanrum/mock.git#0.0.2",
然后使用步骤
- 创建自己的mock文件夹,这里以/mock为例
- 创建index文件,代码如下
const path = require('path'); const mock = require('mock'); module.exports = function(app){ const registerApi = mock.mock(app); registerApi(path.join(__dirname, 'login.js')); };
- 创建自己的,更多关于mockAPI,更多使用请看 https://github.com/huanrum/mock/blob/main/lib/config/index.js
module.exports = function(app, config){ app.get('/login', config({ data: {username: 'XX**XX'}})); };
-
挂载到webpack
devServer: { contentBase: './public',//本地服务器所加载的页面的目录 historyApiFallback: true,//不跳转 inline: true,//实时刷新 port: 8090, hot: true, setup: (middlewares, devServer) => { if (!devServer) { throw new Error('webpack-dev-server is not defined'); }
// ./mock 就是第2点创建的文件 require('./mock')(devServer.app); }, },