自动引入资源require.context

基于vue ，动态引入资源：自动化引入modulues文件下面的api

一、首先 将api挂载到vue的原型上

// 将api挂载到vue的原型上
import api from '@/api' 
Vue.prototype.$api=api

二、文件结构

三、在api/index.js文件下使用require.context(directory,useSubdirectories,regExp)

1：directory：哪个文件夹

2：useSubdirectories：是否需要找到子文件夹

3：regExp：正则表达式（一般指文件的后缀）

自动引入api的过程使用如下：

const commonApiObj = {}
//require.context的第三个参数的后缀可以改为vue
let files = require.context('./modules', true, /\.js$/)
files.keys().forEach(key=>{
    let newKey = key.replace(/(\.\/|\.js)/g, '')
    commonApiObj[newKey] = require(`./modules/${newKey}`).default;
})
export default commonApiObj

四、调用api

//不需要引入，因为自动构建全部挂载在vue原型上,
//logisticsApij是文件名：api/modules/logisticsApi.js
//dataList是logisticsApij下的具体方法
this.$api.logisticsApi.dataList()

总结：这样的话每次就不需要与引入直接调用方便很多api的时候使用，组件也可以使用，路由也可以使用，用途很大，使用方法类似