Vue中使用原生<break>元素触发组件注册报错，如何指定原生元素？

这个警告是因为Vue把<break>当成了未注册的Vue组件，而不是原生HTML元素。要让Vue正确识别它，有两种常用方法：

方法一：全局忽略原生元素 #

如果你的项目中多个地方都会用到<break>，可以在Vue实例初始化之前，全局配置忽略这个元素，这样Vue就不会把它当成组件去解析了：

// 在main.js或者Vue实例创建的入口文件中
Vue.config.ignoredElements = ['break']
// 如果有多个需要忽略的原生元素，可以放在数组里：
// Vue.config.ignoredElements = ['break', 'custom-element']

方法二：局部组件中声明为原生元素 #

如果只是单个组件需要用到<break>，可以在组件的配置里把它注册为原生标签：

<template>
  <div class="flex-container">
    <break></break>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  components: {
    // 告诉Vue这个"break"组件对应原生的<break>元素
    break: 'break'
  }
}
</script>

补充：Vue 3的处理方式 #

如果是Vue 3项目，全局配置的方式略有不同，需要在创建app实例时指定自定义元素判断规则：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 让Vue把<break>识别为原生自定义元素
app.config.compilerOptions.isCustomElement = tag => tag === 'break'
app.mount('#app')

这样处理后，Vue就不会再抛出那个未知组件的警告啦～

内容的提问来源于stack exchange，提问作者Modermo