在Vue中mock假数据

在根目录中创建 mock 文件夹，在该文件夹下写 mock 数据，可以分模块书写，比如现在有两个模块的 mock 数据：

模块1（num.js）：

module.exports = app => {
  app.get('/api/setNum', (req, res) => {
    res.send({
      code: 0,
      msg: 'ok',
      data: {
        num: 2
      }
    })
  })
}

模块2（news.js）:

module.exports = app => {
  app.get('/api/news', (req, res) => {
    res.send({
      code: 0,
      msg: 'ok',
      data: [
        { id: 1000, title: '新闻1' },
        { id: 2000, title: '新闻2' },
        { id: 3000, title: '新闻3' }
      ]
    })
  })
}

在根目录下的 vue.config.js 文件中，将 mock 文件夹下的文件导入：

// vue提供给我们来对于已有的webpack配置进行增量修改
// 此文件的修改，一定要重启项目
const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const fs = require('fs')

// 自动导入
const dirs = fs.readdirSync(path.resolve('mock'))
const mocks = dirs.map(dir => require(`./mock/${dir}`))

// 这种方案是手动导入，当有多个文件需要导入时，会很不方便
// const numFn = require('./mock/num')

module.exports = defineConfig({
  transpileDependencies: true,
  // 修改已有的devServer中的web服务器，从而用来模拟web请求，用来mock一些假数据
  devServer: {
    // vue中提供的web服务器，使用express框架，app对象它就是一express对象
    // 此方法就是一个中间件，它必须要return
    setupMiddlewares(mids, { app }) {
      // numFn(app)
      mocks.forEach(fn => fn(app))
      return mids
    }
  }
})