使用require.context()方法，引入组件

最新推荐文章于 2024-07-16 14:00:32 发布

bitter️

最新推荐文章于 2024-07-16 14:00:32 发布

阅读量470

点赞数 1

分类专栏： node.js 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_59501287/article/details/126977686

版权

node.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

require.context（检索的目录，是否检索子文件夹，匹配文件名的正则表达式）

import Vue from 'vue'
const requireComponents = require.context('../', true, /\.vue/)
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // fileName得到组件的路径 ./home/index.vue
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  //fileName.split('/') ----> [.,home,index.vue]
 //pop()方法是删除数组最后一位，并返回删除的元素
  //fileName.split('/').pop() ----> [index.vue]
//fileName.split('/').pop().split('.')[0] ---->index
  const reqComName =
    'c' +
    fileName
      .split('/')
      .pop()
      .split('.')[0]
//Vue.component(组件名称，组件名称对应的路径)
  Vue.component(reqComName, reqCom.default || reqCom)
})