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) => {
   
    
  // 获取文件名 法一
  // 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 />

require.context(param1,param2,param3)

path.basename(path[, ext])

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

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