nuxt.js - Nuxt 不会自动从嵌套目录导入组件

Question

在我的 nuxt 应用程序中，嵌套目录中的组件不会按预期自动导入。对于我的一些组件，我有如下内容:vue 2.6.12 , nuxt 2.15.0components\目录结构

TopArea\
--SomeComponent.vue

<template>
  <header class="header">
    <div>Hello</div>
    <SomeComponent />
  </header>
</template>

应用程序中没有其他组件具有名称 SomeComponent .在上面的例子中，我得到了错误: Unknown custom element: <SomeComponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option. .我可以通过在组件文件名( TopAreaSomeComponent )之前指定目录名称、使用 nuxt.config 中的前缀选项或手动导入组件来解决这个问题。这令人困惑，因为 docs状态:

Nested Directories
If you have components in nested directories such as:
components/baseButton.vue
The component name will be based on its own filename. Therefore, the component will be:
<button />

它继续说“为了清楚起见，我们建议您在文件名中使用目录名称”。但这似乎是规则而不是建议。如果我不使用目录名作为文件名的一部分，则动态导入不适用于嵌套目录中的组件。
这是文档中的错误还是我读错了？

Answer 1

从 Nuxt 2.15.0 开始，components更改了他们在此 github issue 中所述的工作方式.
根据您的结构以及您希望如何处理您的组织，您可以根据此处提供的迁移指南相应地编辑您的配置:https://github.com/nuxt/components#v1-to-v2
或者您也可以简单地设置 pathPrefix选项让您的所有组件都可用，而无需任何前缀。

// nuxt.config.js
export default {
  components: [
    {
      path: '~/components', // will get any components nested in let's say /components/test too
      pathPrefix: false,
    },
  ]
}

该文档实际上确实需要更新，确实: https://nuxtjs.org/docs/2.x/directory-structure/components#components-discovery