【Vue3】引入组件Failed to resolve component: MyButton If this is a native custom element

When the component is introduced, the shadow of the component does not appear on the page, and other elements are normal. It is initially determined that there is a problem with the syntax of the component introduction part. Open the developer tools and see the error code reported on the console:

 Failed to resolve component: MyButton If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

translate

无法解析组件：我的按钮如果这是本机自定义元素，请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。

I found some methods provided by bloggers such as:

• The script tag of the component does not add setup
• Curly brackets and the like are added when introducing. In this case, obviously this error message will not be reported, but the following one, and it will also affect the loading of other elements on the page.

  Uncaught SyntaxError: The requested module '/components/MyButton.vue?t=1676209371149' does not provide an export named 'MyButton'
  

  
  
  
  Finally, after my own investigation, I found that the problem was caused by a problem in the components step when importing components.

<script>
import MyButton from '../components/MyButton.vue'
export default {
      
      
    data() {
      
      
        return {
      
      
            msg: "我爱vue"
        }
    },
    components: {
      
      
        MyButton
    }
}
</script>
<template>
    <h1>{
   
   { msg }}</h1>
    <MyButton></MyButton>
    <!-- <MyButton></MyButton> -->
</template>