晦涩的错误说我的组件名称以零

Question

我收到一个模糊的错误，我的组件名称为零。但我的组件中没有一个名称为零。此错误很难追查。任何人都知道问题可能是什么，所以我可以朝着正确的方向前进来解决它。

  

vendor.js：66537 [Vue警告]：组件名称无效：“0”。组件名称只能包含字母数字字符和连字符，并且必须以字母开头。

有关错误的更多信息：

修改：更多信息：

我有一个独特的项目结构。我有单个文件组件。每个组件分为2个文件，如下所示：

Home.vue：

<template>
    ...
</template>

<style lang="scss">
    ...
</style>

<script src="./home.js"></script>

home.js：

export default {
    ...
}

编辑：调试捕获

编辑：home.js

import RecentPostsWidget from './widgets/RecentPosts'
import PagesWidget from './widgets/Pages'

export default {
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}

Answer 1

我有同样的错误，这是由于使用数组而不是组件中的对象引起的。 这就是它的样子

components: {
  RecentPostsWidget,
  PagesWidget
}

这是我出现错误时的处理方式：

components: [
  RecentPostsWidget,
  PagesWidget
]

Answer 2

您可以尝试为组件添加名称吗？

home.js

import RecentPostsWidget from './widgets/RecentPosts'
import PagesWidget from './widgets/Pages'

export default {
    name: 'p-components-home',
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}

Answer 3

尝试替换

components: {
    RecentPostsWidget,
    PagesWidget
}

与

components: {
    recentPostsWidget: RecentPostsWidget,
    pagesWidget: PagesWidget
}

Answer 4

我笨到把我的组件命名为

export default {
  components: 'footer',
}

代替：

export default {
  name: 'Footer',
}

Answer 5

您需要在组件导入结束时添加.vue

import RecentPostsWidget from './widgets/RecentPosts.vue'
import PagesWidget from './widgets/Pages.vue'

export default {
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}