Vue组件解析失败求助：ModalBoxActionArticle组件无法显示问题排查

首先看你遇到的错误提示：

[Vue warn]: Failed to resolve component: ModalBoxActionArticle at at <Home onVnodeUnmounted=fn ref=Ref< undefined > > at at

这个组件无法解析的问题，根源其实是一个非常容易忽略的拼写错误——在ImageArticle组件的脚本里，你把注册组件的配置项写成了单数的component，但Vue要求必须用复数形式components（注意末尾的s）。

修正后的ImageArticle组件脚本代码 #

<script>
import ModalBoxActionArticle from '../components/modalBoxActionArticle'
export default {
  name: 'ImageArticle',
  components : { ModalBoxActionArticle }, // 这里把component改为components
  setup() {
    console.log('%c loading ImageArticle component', 'color:green');
    return {};
  },
}
</script>

问题原因说明 #

在Vue的选项式API中，局部组件必须通过components这个复数选项来声明注册。如果写成单数的component，Vue会完全忽略这个不合法的配置项，自然找不到你引入的ModalBoxActionArticle组件，也就会抛出组件未解析的警告。

你其他部分的代码都没问题：组件引入路径正确、模板里的组件调用语法规范，只要修正这个拼写错误，ModalBoxActionArticle组件就能正常显示了。

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