Nuxt 3 忽略命名组件的文件路径？答案

【问题标题】：Nuxt 3 ignore filepath for naming components?Nuxt 3 忽略命名组件的文件路径？
【发布时间】：2022-11-11 09:28:53
【问题描述】：

我正在迁移到 NuxtJS 3，但我的项目有多个级别的 component 文件夹：

/components 
     /foo
          file.vue
          file2.vue
               /fooTwo
                    anotherfile.vue
     /bar
          file1.vue
          file10.vue
 etc...

因为Nuxt's naming convention，如果我尝试导入anotherfile 组件，我必须将它在我的代码库中使用的每个地方重命名为：<FooFooTwoanotherfile/>

因为他们的documentation states：

组件的名称将基于它自己的路径目录和文件名

我真的不想遍历并重命名该组件正在使用的每个地方。而且我也不想扁平化我的目录结构。那么，Nuxt 3 中是否有一些配置选项可以覆盖它并让我只用它们的原始名称全局调用组件？

【问题讨论】：

标签： vue.js nuxt.js nuxtjs3

【解决方案1】：

我的answer here 仍然与 Nuxt3 相关

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  components: [
    {
      path: '~/components', // will get any components nested in let's say /components/nested
      pathPrefix: false,
    },
  ]
})

并且将允许您自动导入组件，而无需为组件指定嵌套路径。

/pages/index.vue

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

具有以下文件结构

【讨论】：

【解决方案2】：

正如@kissu 建议的那样，这就是答案：

nuxt.config.ts

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

【讨论】：