webpack5 + mocker-api + mockjs 实现模拟后端接口

1、安装依赖

npm install mocker-api mockjs --save-dev

2、配置webpack5的devServer

const apiMocker = require("mocker-api");
const path = require("path");
const { globSync } = require("glob");

devServer: {
  proxy: ServerProxy, // proxy写在前面那么优先命中proxy
  setupMiddlewares(middlewares, devServer) {
    const paths = globSync(path.resolve(__dirname, "../mock/**/*.ts"));
    apiMocker(devServer.app, paths);
    return middlewares;
  },
},

3、新建mock文件夹写入index.ts文件

const Mock = require("mockjs")
const sleep = require("mocker-api/delay")

const proxy = {
  'GET /api/tags': (req, res) => {
    res.send(
      Mock.mock({
        // 3条数据
        "info|3": [{
          // 商品种类
          "goodsClass": "女装",
          // 商品Id
          "goodsId|+1": 110,
          //商品名称
          "goodsName": "@ctitle(10)",
          //商品地址
          "goodsAddress": "@county(true)",
          //商品等级评价★
          "goodsStar|1-5": "★",
          //商品图片
          "goodsImg": "@image('100x100','@color','小甜甜')",
          //商品售价
          "goodsSale|30-500": 30,
          // 邮箱：
          "email": "@email",
          // 颜色
          "color": "@color",
          // name
          "name": "@name",
          //img,参数1：背景色，参2：前景色，参3：图片的格式，默认png，参4：图片上的文字
          "img": "@image('100*100','@color')",
          //英文文本(句子)参1：句子的个数，参2：句子的最小个数  参3：句子的最大个数，没有参1时，参2参3才会生效
          "Etext": "@paragraph(1,1,3)",
          //中文文本(句子)参1：句子的个数，参2：句子的最小个数  参3：句子的最大个数，没有参1时，参2参3才会生效
          "Ctext": "@cparagraph(1,1,3)",
          //中国大区
          "cregion": "@region",
          // 省
          "cprovince": "@province",
          //市
          "ccity": "@city",
          //省 + 市
          "ss": "@city(true)",
          //县
          "country": "@county",
          //省市县
          "countrysx": "@county(true)",
          //邮政编码
          "code": "@zip"
        }]
      })
    )
  }
}

module.exports = sleep(proxy, 1500)