CRA脚手架下在webpack中Mock配置详解

首先安装我们所需要的库，axios，mock，mock-api。

npm install axios

npm install mockjs

npm install mocker-api

然后在我们的src文件夹下新建mock文件夹，在mock文件夹下创建moker.js用来存放模拟的接口数据。具体内容如下：

const proxy = {

    'GET /api/user': { id: 1, username: 'kenny', sex: 6 },

    'GET /api/user/list': [

      { id: 1, username: 'kenny', sex: 6 },

      { id: 2, username: 'kenny', sex: 6 }

    ],

    'POST /api/login/account': (req, res) => {

      const { password, username } = req.body

      if (password === '888888' && username === 'admin') {

        return res.send({

          status: 'ok',

          code: 0,

          token: 'sdfsdfsdfdsf',

          data: { id: 1, username: 'kenny', sex: 6 }

        })

      } else {

        return res.send({ status: 'error', code: 403 })

      }

    },

    'DELETE /api/user/:id': (req, res) => {

      console.log('---->', req.body)

      console.log('---->', req.params.id)

      res.send({ status: 'ok', message: '删除成功！' })

    }

  }

  module.exports = proxy;

然后需要在webpackDevServer.config.js文件中配置mock相关库(如果没有暴露配置文件，需要通过npm run eject命令先暴露出配置文件)

......

const path = require('path');

......

//mock模块引入

const apiMocker = require('mocker-api');

.......

before(app, server) {

......

      //mocker模拟后端接口

      apiMocker(app, path.resolve(__dirname, '../src/mock/mocker.js'));

......

}

最后就可以在我们所需要使用mock的地方直接模拟接口调用了.

getData = () => {

    axios.get('/api/user')

    .then(res => {

    console.log(res.data);

    })

    .catch(err => {

    console.log(err);

    });

  }