VUE获取文件夹下的文件并引入
VUE获取文件夹下的文件并引入
·
获取文件夹下的图片
const files = require.context('@/assets/images',false,/.png$/);
const path = require('path');
const allPngImg = {}
files.keys().forEach(fileName => {
const name = path.basename(fileName, '.png');
const content = files(fileName).default || files(fileName);
allPngImg[name] = content;
})
console.log(allPngImg, 'allPngImg')
拓展
关于require.context
require.context(参数1,参数2,参数3)
参数1:表示检索的目录
参数2:表示是否检索子文件夹
参数3:regExp匹配文件的正则表达式,一般是文件名
例如 require.context(“@/views/components”,false,/.vue$/)
用法延伸
1、用来在组件内引入多个组件。
const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
const name = path.basename(key, '.vue')
modules[name] = files(key).default || files(key)
})
export default{
...
components:modules
}
2、在main.js中引入大量公共组件
import Vue from 'vue'
// 自定义组件
const requireComponents = require.context('../views/components', true, /\.vue/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
// 组件实例
const reqCom = requireComponents(fileName)
// 截取路径作为组件名
const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
// 组件挂载
Vue.component(reqComName, reqCom.default || reqCom)
})
更多推荐
已为社区贡献1条内容
所有评论(0)