如何在Vue/Nuxt中编程式导入文件夹内所有组件替代硬编码导入

方案1：最小改动适配你现有逻辑 #

你当前写的动态注册逻辑本身已经能实现自动导入注册，只需要做3处调整即可完全删除所有手动import语句：

• 第一步：删除script标签中所有手动导入组件的import代码，全部不需要保留
• 第二步：调整require.context的正则规则，匹配你实际的组件文件名：你当前的正则是匹配S开头的.vue文件，和你的MyVueComponent开头的组件命名不匹配，修改为对应规则即可，比如要匹配该目录下所有.vue文件可以写成/[\w-]+\.vue$/
• 第三步（可选优化）：如果不需要全局注册这些组件，可以把全局注册逻辑改为仅注册到当前组件实例，避免污染全局组件池

修改后的created钩子代码示例：

data() {
  return {
    generatedComponentList: []
  }
},
created() {
  const requireComponent = require.context(
    "../components",
    false,
    // 匹配该目录下所有vue文件，如有特定前缀要求自行调整正则
    /[\w-]+\.vue$/
  );

  requireComponent.keys().forEach((fileName) => {
    const componentConfig = requireComponent(fileName);
    const componentName = fileName.replace(/^\.\/(.*)\.\w+$/, '$1');
    this.generatedComponentList.push(componentName);
    // 仅注册到当前组件实例，不需要全局注册就用这个，代替Vue.component
    this.$options.components[componentName] = componentConfig.default || componentConfig;
  });
},

你的模板渲染逻辑不需要做任何修改，新增组件时只要把.vue文件放到对应目录，刷新页面就会自动加载渲染。

方案2：使用Nuxt原生组件自动导入能力（更推荐） #

Nuxt从2.13版本开始内置了组件自动导入功能，不需要自己写任何导入、注册逻辑，操作更简单：

1. 在nuxt.config.js中开启组件自动导入配置：

// Nuxt2 配置
export default {
  components: true
}
// Nuxt3 默认已开启，无需额外配置

2. 所有放在~/components目录下的.vue组件都会被自动识别，不需要手动import，也不需要自己写注册逻辑。
3. 如果你需要动态遍历渲染所有卡片组件，只需要补充一段逻辑读取components目录下的组件名即可，示例：

data() {
  return {
    generatedComponentList: []
  }
},
created() {
  const requireComponent = require.context(
    "~/components",
    false,
    /MyVueComponent[\w-]+\.vue$/
  );
  this.generatedComponentList = requireComponent.keys().map(fileName => 
    fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
  );
}

模板渲染逻辑和之前完全一致，后续新增组件只要把文件丢到~/components目录，不需要修改任何代码即可自动识别渲染。

内容的提问来源于stack exchange，提问作者sandalwoodsh