Nuxt 不会自动从嵌套目录导入组件

Question

在我的 nuxt 应用程序中，嵌套目录中的组件没有按预期自动导入。对于我的一些组件，我有如下内容：

vue 2.6.12, nuxt 2.15.0

components\目录结构

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/ts

components: [
  {
    path: '~/components', // will get any components nested in let's say /components/test too
    pathPrefix: false,
  },
]

PS：此解决方案也适用于 Nuxt3。

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

这是它的工作原理：对于给定的页面

<template>
  <div>
    <yolo-swag /> <!-- no need for <nested-yolo-swag /> here -->
  </div>
</template>

还有下面的文件树

Nuxt3 更新

Looks like这是新的官方语法

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  components: {
    global: true,
    dirs: ['~/components']
  },
})

Answer 2

这可能已经回答了。但是为了向这里的来者说明解决方案，这里是根据文档的方式：

<TopAreaSomeComponent />

如果您的组件嵌套很深：

components / TopArea / SomeComponent.vue

https://nuxtjs.org/docs/directory-structure/components/#nested-directories

Nuxt 不会自动从嵌套目录导入组件

Nuxt not automatically importing components from nested directory

nuxt.js

nuxtjs3

Nuxt3 更新