代码如下,有api项目结构的目录下有多个api文件,可用以下方法挂载在全局上,或者components目录下有许多组件,自动全局注册。避免手动一个一个导入
// 自动加载config.path目录下的文件,避免手动一个一个引入
export const autoLoad = (config) => {
let files = require.context(config.path, true, /\.js$/)
if(config.suffix==='vue'){
files = require.context(config.path, true, /\.vue$/)
}
const recursionAdd = (item, fileList, value) => {
const fileArr = JSON.parse(JSON.stringify(fileList))
if (fileArr.length > 1) {
if (!item[fileArr[0]]) {
item[fileArr[0]] = {}
}
const map = item[fileArr[0]]
fileArr.shift()
recursionAdd(map, fileArr, value)
} else {
item[fileArr[0]] = value
}
}
const importAll = (context) => {
const map = {}
context.keys().forEach((key) => {
let keyFile = key.replace(/\.js$/g, '').replace(/\.\//g, '')
if(config.suffix==='vue'){
keyFile = key.replace(/\.vue$/g, '').replace(/\.\//g, '')
}
const fileArr = keyFile.split('/')
recursionAdd(map, fileArr, context(key))
})
return map
}
const configInterface = importAll(files)
return configInterface
}
/**
* 挂载指定目录下的指定文件到Vue原型链上
* @param Vue
* @param config:{key:'属性名称',path:'路径',suffix:文件后缀js|vue,}
* @description vue组件中使用说明: this.$属性名称.文件名称.方法名称()
**/
export const install = (app,config) => {
if(!config){
return
}
if (install.installed) {
return
}
install.installed = true
Object.defineProperties(app.config.globalProperties, {
['$'+config.key]: {
get() {
return autoLoad(config)
}
}
})
}
export default install