以编程方式从文件夹中导入 Vue 组件，而不是硬编码（我实际上使用的是 Nuxt，但我将其称为 Vue）

Posted 2023-02-23

【中文标题】以编程方式从文件夹中导入 Vue 组件，而不是硬编码（我实际上使用的是 Nuxt，但我将其称为 Vue）

【英文标题】：Import Vue components from folder programmatically not hard coded (I'm actually using Nuxt but I'll call it Vue)

【发布时间】：2021-11-15 13:12:02

【问题描述】：

我在 Vue 中有许多 SVG 卡作为组件；我可能有50个或更多。我可以在脚本标签之后一一导入：

<script>
import MyVueComponent1 from "~/components/MyVueComponent1.vue";
import MyVueComponent2 from "~/components/MyVueComponent2.vue";
import MyVueComponent3 from "~/components/MyVueComponent3.vue";
...
import MyVueComponent50 from "~/components/MyVueComponent50.vue";

但我一直在阅读，我可以通过编程方式完成此操作。我只是还没有找到任何一个让我一目了然的例子。我能够动态注册组件，但我不确定如何导入整个组件文件夹。

我能够在创建的钩子中使用此代码动态注册组件：

created() 
    const requireComponent = require.context(
      // Look for files in the current directory
      "../components",
      // Do not look in subdirectories
      false,
      // Only include "S" prefixed .vue files
      /S[\w-]+\.vue$/
    );

    // For each matching file name...
    requireComponent.keys().forEach((fileName) => 
      // Get the component config
      const componentConfig = requireComponent(fileName);
      // Get the PascalCase version of the component name
      fileName = fileName.replace("./", "");
      fileName = fileName.replace(".vue", "");
      const componentName = fileName;
      this.generatedComponentList.push(componentName);
      // Globally register the component
      Vue.component(componentName, componentConfig.default || componentConfig);
    );
  ,

我正在使用组件名称的 generatedComponentList 来显示卡片：

<div
      v-for="componentName in generatedComponentList"
      :key="componentName"
    >
      <component :is="componentName" :id="componentName"></component>
    </div>

但我很想摆脱脚本标签下的所有导入行，并拥有更简洁、更动态的代码。这样，如果我在文件夹中添加一个新的组件卡，它只会被“拾取”并显示，而无需添加“导入”行或注册组件等。希望我已经清楚地表达了我在寻找什么去实现。

【问题讨论】：

我不明白你的问题 - 特别是最后一段。 require.context 完全符合您的要求 - 只需删除您的静态导入

这能回答你的问题吗？ How do I properly import multiple components dynamically and use them in Nuxt?

@kissu 我不认为他在寻找动态组件。在我看来，这一切在运行时都是静态的，但在构建时是动态的——更像是在构建时自动发现组件 + 创建要在运行时使用的组件列表

【参考方案1】：

Nuxt 会自动从 ~/components 目录导入您使用的组件，因此您无需显式导入或注册它们。

此功能在nuxt.config.js 中通过components config 启用：

// nuxt.config.js
export default 
  components: true

【讨论】：

如果你想导入那么所有即使嵌套到components中的其他其他目录，你可以按照这个答案：***.com/a/66336654/8816585

同时，我不确定它在性能方面是不是最好的：github.com/nuxt/components/issues/227#issuecomment-902013353

【参考方案2】：

感谢 tony19 建议我查看 nuxt.config.js 文件，您的回答肯定让我走上了正轨；还要感谢建议1 的人可能是正确的答案。

这是对我有用的解决方案：

根据 tony19 的建议，我查看了我的 nuxt.config.js 文件；特别是组件部分。我的代码中已经有这一行来自动导入组件文件夹中的任何组件：

components: true,

但我要导入的组件嵌套在 components 文件夹中的另一个文件夹中。

在阅读了来自 nuxt.org 文档的 2 之后，我将之前的代码替换为：

//components: true,
  components: [
    // Equivalent to  path: '~/components' 
    '~/components',
     path: '~/components/myTargetComponents', extensions: ['vue'] 
  ],

然后，我能够删除所有导入行：

<script>
import MyVueComponent1 from "~/components/MyVueComponent1.vue";
import MyVueComponent2 from "~/components/MyVueComponent2.vue";
import MyVueComponent3 from "~/components/MyVueComponent3.vue";
...
import MyVueComponent50 from "~/components/MyVueComponent50.vue"; 

在我的 index.vue 文件中，组件部分中不再列出任何内容......这只是对我自己的提醒：

,
  components: 
    //see nuxt.config.js file ...component section
  ,

为了清楚起见，在我的 index.vue 文件中，我没有使用这种格式导入任何组件，“import MyVueComponent1 from "~/components/MyVueComponent1.vue"; 而且我没有在组件部分。另外只是为了澄清一下，我要导入的组件位于组件文件夹的子文件夹中（~/components/myTargetComponents）。我现在意识到我在原始帖子中没有清楚地表达这一点。

作为一个相关的部分......

从我的原始帖子中可以看出，我在 created 钩子中使用了一段代码来填充组件名称列表：

this.generatedComponentList.push(componentName);

然后使用此列表遍历组件卡：

<div
      v-for="componentName in generatedComponentList"
      :key="componentName"
    >
      <component :is="componentName" :id="componentName"></component>
    </div>

但我想知道是否存在由 nuxt.config.js 文件生成的这些组件的列表。有什么建议？再次感谢大家的帮助，非常感谢。