一分钟学会配置Mock自定义文件

喜大普奔,我的npm包上线啦~！！！

只需配置后面的操作，就可以无障碍使用Mock了。

攻略

npm install mocker-api-json mocker-api --save-dev

webpack dev文件

这里主要用到webpack devServer before钩子,它可以拦截请求 www.webpackjs.com/configurati…

const path = require('path');

const webpack = require('webpack');

const merge = require('webpack-merge');

const BaseConfig = require('./webpack.base.js');

const apiMocker = require('mocker-api');
//webpack配置
mode: 'development',
  devServer: {
    host: '0.0.0.0',
    port: 9001,
    headers: {
      'Access-Control-Allow-Origin': '*'
    },
    historyApiFallback: {
      rewrites: [{
        from: /.*/g,
        to: '/www/view/index.html'
      }]
    },
    proxy: {
      '/api': {
        target: 'http://test01.test.com:8091/'
      }
    },
    before(app) {//此处是重点`!!!!!!!!!!!!!!!
      //https://www.webpackjs.com/configuration/dev-server/#devserver-before
      apiMocker(app, path.resolve(__dirname, '../mock/index.js'));
    }
  },

mock/index.js文件 这里是配置文件，核心部分

const json=require('mocker-api-json');
module.exports =json({
    mock:true,//全局打开mock
    dirname:__dirname,//当前文件路径
    baseUrl:'api/',//公共请求链接
    delay:10//延迟时间
});

额... 目前只加了这几个配置，后续提issues再加吧

Mock资源文件配置

主要用驼峰命名方式，大写字母做匹配,目的就是生成这样的键值对。

// const proxy = loadData({
//   'POST /api/edit/apply': './editApply',
//   'POST /api/verify/apply': './verifyApply',
//   'POST /api/accept/apply': './editApply',
//   'POST /api/edit/submit': './editSubmit',
//   'POST /api/verify/submit': './editSubmit',
//   'POST /api/accept/submit': './editSubmit',
//   'POST /api/rawore/get': './raworeGet',
// });

json文件就这样

{
  "err_code": 0,
  "err_msg": "ok",
  "mock": true,//控制单个文件mock开关
  "data": {
    "poi": {
      "z_id": "111111111111",
      "name": "中国技术交易大厦大厦大厦",
      "province": "",
      "city": "北京市",
      "district": "海淀区",
      "longitude": 116.307499005,
      "latitude": 39.111,
      "addr": "",
      "category": "房产小区:商务楼宇",
      "category_code": 281200,
      "expiration_label": 0,
      "phone": ""
    }
  }
}

后记

大概就这些啦，如有问题可去我的博客yuwangi.github.io 联系我