Vue自定义组件报错：Unknown custom element: <modal-base> 求助

我刚看了你的问题和代码，你已经把组件导入注册的流程走了一遍，但还是遇到了<modal-base>未识别的警告，我来帮你梳理几个容易踩坑的点：

1. 先确认ModalBase是不是真的被正确导入了 #

在NoticeModal.vue的脚本里加个日志，看看导入的ModalBase到底是什么：

import {ModalBase} from '@/components/index';
console.log('ModalBase组件:', ModalBase); // 新增这行日志
export default {
  // 你的其他代码
}

如果控制台输出undefined，那百分百是@/components/index里的导入路径出问题了。仔细核对一下index.js里的路径：

// 确认这个路径是不是真的指向你的ModalBase.vue文件
import ModalBase from '@/components/componentsFile/ModalBase.vue'

我之前踩过这个坑，在区分大小写的系统上，文件夹名写错了一个字母，导致组件导入失败，检查的时候一定要仔细！

2. 试试换一种组件引用写法 #

Vue里驼峰注册的组件用短横线写法是规范的，但有时候可能会有解析的小问题，你可以在NoticeModal.vue的模板里直接用驼峰试试：

<template>
  <div class="noticeModal">
    <ModalBase> <!-- 改成驼峰式引用 -->
      <div slot="header">hello</div>
    </ModalBase>
  </div>
</template>

如果这样警告消失了，那说明是模板解析时的大小写兼容问题，虽然少见，但也有可能发生。

3. 重启开发服务器清缓存 #

有时候开发服务器的缓存会搞事情，明明改了代码但没生效，试试关掉服务再重新启动，然后刷新页面看看警告还在不在。我遇到过好几次，都是缓存导致的假问题。

4. 检查Vue版本是否匹配 #

看你的代码是Vue2的写法，但如果你的项目实际用的是Vue3，虽然基本兼容，但也可能出现奇怪的组件识别问题。你可以去package.json里看看Vue的版本：

{
  "dependencies": {
    "vue": "^2.6.14" // 或者是3.x版本？
  }
}

如果是Vue3，推荐用<script setup>语法，这种写法不需要手动注册组件，直接导入就能用，更不容易出错：

<!-- NoticeModal.vue 改成Vue3的写法 -->
<script setup>
import {ModalBase} from '@/components/index';
</script>
<template>
  <div class="noticeModal">
    <modal-base>
      <div slot="header">hello</div>
    </modal-base>
  </div>
</template>

5. 最后再核对一遍组件注册 #

虽然你说已经注册了，但再确认一下NoticeModal.vue里的components选项：

components: {
  ModalBase // 这里是对的，等价于ModalBase: ModalBase
}

这个写法是没问题的，不过也可以写成完整的键值对试试，比如{ 'modal-base': ModalBase }，然后模板里用<modal-base>，看看会不会生效。

按照上面的步骤排查，应该能找到问题。我觉得大概率是导入路径的问题，你重点检查一下@/components/index里的文件路径，有没有写错文件夹名或者文件名~

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