vue运行报错:Do not use built-in or reserved HTML elements as component id: header

使用uni-app基于vue框架开发项目后,运行项目报错。

错误信息:

Do not use built-in or reserved HTML elements as component id: header

错误原因:

    自定义命名的components名称不正确,不能使用header这一类的关键词来命名组件名称。

解决方式:

    在项目中找到组件名称为header的组件,进行修改header名称为别的名称。因为在前端html中header名称已经被占用,不能重复使用。

一、组件内名称修改:

export default {
name: 'header',
}

修改为

export default {
name: 'headerBox',
}

组件中定义的组件名称name修改为其它值,不能为header。

二、组件引用名称修改

import header from './layout/header.vue'
export default {
name: 'App',
components: {
header
}
}

修改为:

import headerBox from './layout/header.vue'
export default {
name: 'App',
components: {
headerBox
}
}

注:headerBox为自定义组件名称,可根据实际情况进行定义。但应避免使用一些特殊的关键词。如header、article等。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!