Nuxt 不会自动从嵌套目录导入组件 [英] Nuxt not automatically importing components from nested directory

问题描述

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

In my nuxt app, components in nested directories are not automatically importing as expected. For some of my components i have something like the following:

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: - 您是否正确注册了组件?对于递归组件，请确保提供名称"；选项..我可以通过在组件文件名 (TopAreaSomeComponent) 之前指定目录名称、使用 nuxt.config 中的前缀选项或手动导入组件来解决此问题.这令人困惑，因为 docs 状态:

No other component in the application has the name SomeComponent. In the example above i get the error: Unknown custom element: <SomeComponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.. I can get around the issue by specifying the directory name before the component filename (TopAreaSomeComponent), use the prefix option in nuxt.config, or by manually importing the component. This is confusing because the docs state:

嵌套目录
如果您在嵌套目录中有组件，例如:
components/baseButton.vue
组件名称将基于其自己的文件名.因此，该组件将是:

接着说为了清楚起见，我们建议您在文件名中使用目录名".但这似乎是规则而不是建议.如果我不使用目录名作为文件名的一部分，则动态导入不适用于嵌套目录中的组件.

It goes on to say "We recommend you use the directory name in the filename for clarity". But that seems like a rule than a recommendation. If i don't use the directory name as part of the filename, dynamic imports are not working for components in nested directories.

这是文档中的错误还是我读错了?

Is this an error in the docs or am I reading it wrong?

推荐答案

自 Nuxt 2.15.0 起，components 的工作方式发生了变化，如本github 问题.

Since Nuxt 2.15.0, components changed in the way they work as stated in this github issue.

根据您的结构以及您希望如何处理您的组织，您可以根据此处提供的迁移指南相应地编辑您的配置:https://github.com/nuxt/components#v1-to-v2

Depending of you structure and how you want to handle your organization, you may edit your configuration accordingly to the migration guide available here: https://github.com/nuxt/components#v1-to-v2

或者您也可以简单地设置 pathPrefix 选项，让您的所有组件都可用，而无需任何前缀.

Or you could also simply set the pathPrefix option to have all your components available without any prefix at all.

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

This documentation actually do need an update, indeed: https://nuxtjs.org/docs/2.x/directory-structure/components#components-discovery

这篇关于Nuxt 不会自动从嵌套目录导入组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！