晦涩的错误说我的组件名称以零开头答案

【问题标题】：Obscure error says my component name begins with a zero晦涩的错误说我的组件名称以零开头
【发布时间】：2018-09-22 08:39:21
【问题描述】：

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

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
    }
}

【问题讨论】：

你能在validateComponentName 中放置一个断点，看看它是如何看待你的模块的吗？
@raina77ow 我添加了一个屏幕截图。错误发生在路由器视图上
能看到home.js的内容吗？
@Borjante 请看我的编辑:)
怀疑，没有定义名称。让我们尝试添加一个

标签： vue.js vuejs2

【解决方案1】：

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

home.js

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

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

【讨论】：

这个名字总是需要的吗？
我不确定，我确定这是最佳实践。它是否不断抛出与名称相同的错误？
是的，不幸的是，当我添加名称时出现同样的错误
很有趣，现在仅用于调试目的。如果将 home.js 的内容放在 Home.vue 模板文件中并删除对 home.js 文件的引用会怎样？
对我来说问题是名称字符串中有一个空格。

【解决方案2】：

您需要在组件的导入末尾添加.vue

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

export default {
    components: {
        RecentPostsWidget,
        PagesWidget
    }
}

【讨论】：

【解决方案3】：

尝试替换

components: {
    RecentPostsWidget,
    PagesWidget
}

与

components: {
    recentPostsWidget: RecentPostsWidget,
    pagesWidget: PagesWidget
}

【讨论】：

【解决方案4】：

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

components: {
  RecentPostsWidget,
  PagesWidget
}

这是我出现错误时的样子：

components: [
  RecentPostsWidget,
  PagesWidget
]

【讨论】：

太棒了！此答案应设置为正确答案。

【解决方案5】：

我笨到把我的组件命名为

export default {
  components: 'footer',
}

而不是：

export default {
  name: 'Footer',
}

【讨论】：

【解决方案6】：

在某处查找您正在使用大括号的组件：[] 并将它们更改为 {} 示例：

components: [
     Logo,
     Nav
   ],

切换到：

components: {
     Logo,
     Nav
   },

【讨论】：