配合webpack来mock

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2022-06-19

配置webpack

webpack.config

const customMock = require('../utils/customMock.js');

module.exports = {
  entry: 'xx',
  devServe: {
    host: ip,
    before(app) {
     customMock.install(app);
    },
  } 
}

自定义mock拦截，如下文件customMock.js

const moment = require('moment');
const bodyParser = require('body-parser');

exports.install = function install(app) {
  app.use(bodyParser.json());
  app.post('/api/*', apiServer);
  app.get('/api/*', apiServer);
  app.put('/api/*', apiServer);
  app.delete('/api/*', apiServer);
};

function cleanCache(module) {
  const path = require.resolve(module);
  // 清楚缓存 不然每次要重启服务
  delete require.cache[path];
}

function apiServer(req, res) {
  try {
    const mockJSModule = `../../mock-data${req.path.slice(4)}.js`;
    const dataJS = require(mockJSModule);

    res.json(dataJS(req.body, req.query, req.path));

    cleanCache(mockJSModule);

    console.log(`\x1b[32m [Mock Server] [${moment().format('YYYY-MM-DD hh:mm:ss')}] \x1b[0m ${req.method} ${req.path} \x1b[32m 200 \x1b[0m`);
  } catch (e) {
    res.status(404).end();
    console.log(`\x1b[31m [Mock Server] [${moment().format('YYYY-MM-DD hh:mm:ss')}] \x1b[0m ${req.method} ${req.path} \x1b[31m 404 \x1b[0m`);
  }
}

需要确保你访问的路径是/api/xxx 才能被mock捕获， 会访问你目录中mock-data/xxx.js 这个时候返回一个函数就可以了

// mock-data/xxx.js
module.exports = function () {
  return {
    "code": 0,
    "data": {
      name: 'jack',
    }
  };
};

配合vue-cli3来mock

// package.json
"scripts": {
  "serve:mock": "cross-env NODE_ENV=development vue-cli-service serve --mode mock",
},

.env.mock

VUE_APP_MOCK=true

vue.config.js

module.exports = {
  // ...
  chainWebpack: (config) => {
    // 判断环境加入模拟数据
    const entry = config.entry('app');
    if (process.env.VUE_APP_MOCK === 'true') {
      entry
        .add('@/mock/index.ts')
        .end();
    }
  }
  // ...
}

借助mockjs实现拦截，如下@/mock/index.ts

// http://mockjs.com/
import Mock from 'mockjs';
import { getUsers } from './user-mock.ts'

Mock.setup({
  timeout: 100,
});

/** test */
Mock.mock(new RegExp('/user'), 'get', getUsers);

user-mock.ts

import Mock from 'mockjs';

const userMock = {
  /** 姓名 */
  name: '@cname()',
  /** 年龄 */
  'age|18-100': 18

};

export function getUsers() {
  return Mock.mock({
    code: 200,
    message: 'SUCCESS',
    data: userMock,
  });
}