无效的组件名称：“pages/product/_slug.vue”。组件名称应符合 html5 规范中有效的自定义元素名称

Question

Answer 1

如果组件中有名称，请删除名称之间的空格。例如

export default {
  name: 'Assign Role'
}

更改为：

export default {
  name: 'AssignRole',
}

Answer 2

此错误信息的原因是

_slug.vue

组件的名称与文件名相同。

我期待它

name='_slug.vue'

你需要将其更改为这样的

name='ProductItem'

Answer 3

我不确定这是一个错误还是什么。

但是在为我的组件命名后，按如下方式修复了此问题。

  export default {
    name: 'NameOfTheCompnent',
    ...
  }

Answer 4

如果您使用带有

vue-property-decorator

的 vue 2.x，当 vue 组件的类如下所示时，可能会出现此问题：

@Component({})
export default class MyComponent extends Vue {
...
}

您应该删除

({})

或为

name

字段设置特定值 -

@Component

或

@Component({ name: 'MyComponent' })

。

Answer 5

当我在组件列表中使用方括号时，我得到了这个错误，我花了很长时间才发现它，因为所有错误都会导致其他地方。

错了！

export default {
    name: "WelcomeScreen",
    components: [
        Welcome_Ready,
    ],
}

右

export default {
    name: "WelcomeScreen",
    components: {
        Welcome_Ready,
    },
}