vue页面批量引入组件

<template>
  <div>
    <template v-for="(item) in names">
      <component :is="item" :key="item" />
    template>
  div>
template>
<script>
// 可行了
import path from 'path'

// require.context(param1,param2,param3) param1:路径;  param2: 是否搜索子文件夹;  param3: 文件类型，可正则
const files = require.context('@/components/Menu/Dialog', true, /\.vue$/)

const dialogs = {}
const names = []
// 组件导入
files.keys().forEach((key) => {
   /**
    * 
    * 获取vue文件名
    * 法一：用正则表达式匹配 
    * key.replace(/^\.\/(.*)\.\w+$/, '$1')
    * 法一：path.basename获取vue文件名
    * import path from 'path'  
    * path.basename(path[, ext])
	* path.basename() 方法会返回 path 的最后一部分。 尾部的目录分隔符会被忽略。
    **/
    
  // 获取文件名 法一
  // var name = fileName
  //  .split('/')
  //  .pop()
  //  .replace(/\.\w+$/, '');

  // 获取文件名 法二
  const name = path.basename(key, '.vue')
  
  names.push(name)
  dialogs[name] = files(key).default || files(key)
})

export default {
  name: 'Dialogs',
  components: dialogs,
  data() {
    return {
      names: names
    }
  }
}
script>

<style lang="scss" scoped />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

知识点：

require.context(param1,param2,param3)

• param1:路径;
• param2: 是否搜索子文件夹;
• param3: 文件类型，可正则

path.basename(path[, ext])

方法会返回 path 的最后一部分。 尾部的目录分隔符会被忽略

• path ：string
• ext ：string 可选的文件扩展名。

path.basename('/目录1/目录2/文件.html');  // 文件.html
1

path.basename('/目录1/目录2/文件.html', '.html');  // 文件
1