在weboack构建的项目中(vue)使用mockjs

在webpack构建的项目中(vue)使用mockjs

首先需要了解一个方法require.context

官网

语法

require.context(
	directory,
        (useSubdirectories = true),
  	(regExp = /^\.\/.*$/),
  	(mode = 'sync')
)

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。

webpack 会在构建中解析代码中的 require.context() 。

示例

require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

配置Mockjs

• 安装

  # npm
  npm install mockjs --save-dev
  # yarn
  yarn add mockjs --dev
  

• 使用

  // --- project/src/mock/index.js ---
  import Mock from 'mockjs'
  let configArray = []
  const files = require.context('.', true, /\.js$/)
  files.keys().forEach((key) => {
    if (key === './index.js') return
    configArray = configArray.concat(files(key).default)
  })
  // 注册所有的mock服务
  configArray.forEach((item) => {
    for (const [path, target] of Object.entries(item)) {
      const protocol = path.split('|')
      Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target)
    }
  })
  export default Mock
  
  // --- project/src/mock/test.js
  export default {
      'post|/login': () => {
          return {
              code: 1,
              status: 'success',
              data: {}
          }
      }
  }
  
  // --- project/src/main.js
  import Vue from 'vue'
  import router from './router'
  import store from './store'
  // todo 添加环境变量控制是否使用mock
  require('./mock')
  new Vue({
      el: '#app',
      router,
      store,
      components: { App },
      template: '<App/>'
  })