vue项目中，如何在组件内批量引入n个文件？

欢迎大家多多指教，菜鸟一枚！ 最近负责云管平台(不同云商的集合版，涉及到华为云、阿里云、腾讯云、FS、VM等)，设计资源详情页面结构时，遇到需要批量引入vue文件的问题！页面中出现大量重复引入代码import xxxxx form './component/details/xxxxx'等

代码优化之前：

<script>
import ConfigurationInfo from './component/details/ConfigInfoInfo'; 
import CloudDisk from './component/details/CloudDisk'; 
import ElasticIP from './component/details/ElasticIP'; 
import SwitchTab from './component/details/SwitchTab'; 
import StretchInstance from './component/details/StretchInstance'; 
import HwStretchPolicy from './component/details/HwStretchPolicy'; 
import MountInfo from './component/details/MountInfo'; 
import BindCloudServer from './component/details/BindCloudServer'; 
import WayIn from './component/details/WayIn'; 
import Subnet from './component/details/Subnet'; 
import AssociatedVPC from './component/details/AssociatedVPC'; 
import SNATrule from './component/details/SNATrule'; 
import DNATrule from './component/details/DNATrule';
import RuleManagement from './component/details/RuleManagement'; 
import CloudServerGroup from './component/details/CloudServerGroup'; 
import MonitorPage from './component/details/MonitorPage'; 
import RouterListPage from './component/details/RouterListPage';
import PrivateIP from './component/details/PrivateIP';
import VirtualIP from './component/details/VirtualIP'; 
import ...
export default {
  name: 'xxx',
  components: {
    ConfigurationInfo,
    PrivateIP,
    VirtualIP,
    SwitchTab,
    CloudDisk,
    ElasticIP,
    StretchInstance,
    HwStretchPolicy,
    WayIn,
    AssociatedVPC,
    SNATrule,
    DNATrule,
    RuleManagement,
    CloudServerGroup,
    MonitorPage,
    MountInfo,
    BindCloudServer,
    RouterListPage,
    Subnet,
    ...
  }
}
</script>

代码优化之后：

<script>
// 页面需要导入多个组件,优化减少大量重复的代码：require.context
/**
 * require.context(directory,useSubdirectories,regExp)
 * 该方法用于获取当前页面下所有文件路径
 * 1、directory:表示检索的目录;
 * 2、useSubdirectories：表示是否检索子文件夹;
 * 3、regExp:匹配文件的正则表达式,一般是文件名;
 * 4、例如 require.context("@/views/components",false,/.vue$/)。
 *
 * require('path');
 * path模块提供了一些用于处理文件路径;
 *
 * path.basename(p[, ext]);
 * 返回路径中的最后一部分
 * **/
 
//  path模块提供了一些用于处理文件路径;
const path = require('path');
const files = require.context('@/views/cloudy/resource-management/component/details', false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
  const name = path.basename(key, '.vue'); // 获取文件的名字
  modules[name] = files(key).default || files(key);
});
export default {
    name: 'xxx',
    components: modules
}
<script>

希望以上代码能带给你帮助，互动交流，留下您宝贵的意见谢谢！