NuxtJS 组件自动导入突然失效 仅components目录非根组件报错

可能原因 #

• @nuxt/components 依赖近期更新，自动命名规则发生变更
• nuxt.config.js 中的components配置未开启子目录深度扫描，或开启了路径前缀但调用组件时未添加对应前缀
• 组件调用名称与自动注册生成的名称不匹配，常见为大小写、前缀拼写错误
• 项目中存在重复的components配置项，后定义的配置覆盖了默认的全目录扫描规则
• 组件文件后缀不在默认扫描扩展名范围内，未在配置中手动补充对应扩展名

修复步骤 #

1. 核对组件自动注册命名规则
   默认配置下，components/commons/Modal.vue 这类嵌套目录内的组件，自动注册的名称为目录名加文件名的大驼峰格式，即 CommonsModal，调用时可以写 <CommonsModal /> 或者 <commons-modal />，如果直接写 <Modal /> 会提示未注册。
   如果不需要自动添加路径前缀，可以修改nuxt.config.js配置：

// nuxt.config.js
export default {
  components: [
    {
      path: '~/components',
      pathPrefix: false, // 关闭路径前缀自动添加
      deep: true, // 开启深度扫描所有子目录
      extensions: ['vue'] // 配置需要扫描的文件后缀
    }
  ]
}

2. 回退@nuxt/components版本
   如果此前组件可正常使用，近期仅升级过相关依赖，可直接回退到之前的稳定版本：

npm uninstall @nuxt/components
npm install @nuxt/components@<你之前使用的版本号>
# 不确定版本的可以先尝试回退到v1.2.1，这是命名规则变更前的常用稳定版

3. 校验配置与组件名称
   检查nuxt.config.js中是否存在重复的components配置项，避免被覆盖；同时核对组件调用名称和文件名的大小写是否匹配，避免因文件系统大小写规则差异导致的识别异常。
4. 扫描校验组件列表
   在项目根目录执行以下命令，查看自动注册的组件列表，确认嵌套目录的组件是否在列表内：

npx nuxt components list

如果列表中存在对应组件，直接按列表给出的名称调用即可；如果不存在，说明扫描配置有误，重新检查components配置项即可。

内容的提问来源于stack exchange，提问作者Cryptocurrency