vuecli项目中使用mock数据

[openks]

需求： vuecli生成的项目中使用本地模拟数据(不另起项目起mockserver)这样一个项目可以自己直接跑mock数据

[openks]

复制一份build/dev-server.js为build/dev-mock.js并修改build/dev-mock.js

// proxy api requests   需要注掉代理 
// 不然在config/index.js里配置的代理依旧会起作用导致下面的本地mock不起作用
// Object.keys(proxyTable).forEach(function (context) {
//   var options = proxyTable[context]
//   if (typeof options === 'string') {
//     options = { target: options }
//   }
//   app.use(proxyMiddleware(options.filter || context, options))
// })
//添加如下几行代码
var mockDir = path.resolve(__dirname, '../mock');
fs.readdirSync(mockDir).forEach(function (file) {
    var mock = require(path.resolve(mockDir, file));
    app.use('/api' + mock.api, mock.response);
});

遍历mock文件夹下的所有文件使用并路由 在项目根目录建mock文件夹,里面可以按照业务逻辑建子文件(所有文件都会被遍历,文件名无所谓)

const Mock = require('mockjs');
module.exports = {
  api: '/wx/getToken',
  response(req, res) {
    res.json({
      success: true,
      data: {
        name: Mock.Random.first(),
      },
    });
  },
};

package.json做如下改动添加mock命令

  "scripts": {
    "mock": "node build/dev-mock.js",
  }

参考资料

[openks]

使用时发现上面的有问题: 一个文件只能有一个api 修改方案如下： 修改文件为导出数组：

module.exports = [
  {
    api: '/dishesManager/getDayDishes',
    response(req, res) {
      res.json({
        status: null,
        msg: '查询当日菜单成功',
        data: {
          saasPackageDtoList: []
        },
      });
    },
  }, {
    api: '/dishesManager/getTraceDayDishes',
    response(req, res) {
      res.json();
    },
  },
];

修改build/dev-mock.js让它遍历一个文件里的每一个api

var mockDir = path.resolve(__dirname, '../mock');
fs.readdirSync(mockDir).forEach(function (file) {
    var mock = require(path.resolve(mockDir, file));
    mock.forEach(function(el){
      // console.log("mock.api:::",el.api);
      app.use('/weixin-h5' + el.api, el.response);
    })
});