解决 Invalid component name: “404“. Component names should conform to valid custom element name ...

问题描述

在 Vue 项目的控制台中出现以下报错信息：

[Vue warn]: Invalid component name: “404”. Component names should conform to valid custom element name in html5 specification.

翻译：
[Vue warn]：无效的组件名称：“404”。组件名称应符合html5规范中的有效自定义元素名称。

问题出现原因

Vue 组件的命名不符合html5规范

<template>
  <div>
    404 Not Found
  </div>
</template>

<script>
export default {
  name: "404"	// 此处的 Vue 组件命名不符合 HTML5 规范
}
</script>

解决方案

将 name 修改为 ‘NotFound’，即：

<template>
  <div>
    404 Not Found
  </div>
</template>

<script>
export default {
  name: "NotFound"		// 此时的命名符合 HTML5 规范
}
</script>

相关知识

• Custom Elements 标准
• 推荐阅读：http://www.ruanyifeng.com/blog/2017/06/custom-elements.html