引入组件时页面上并没有出现组件的影子,其他元素正常,初步确定是组件引入部分语法出了问题,打开开发者工具看到控制台报出错误代码:

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

翻译

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

搜到了博主们提供的一些方法比如:

  • 组件的script标签没有添加 setup
  • 引入的时候加了大括号之类的,这种情况很显然不会报出这个错误信息,而是下面这个,而且也会影响页面其他元素的加载
    Uncaught SyntaxError: The requested module '/components/MyButton.vue?t=1676209371149' does not provide an export named 'MyButton'

    最后经过自己的排查,发现问题还是因为导入组件时,在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>

【Vue3】引入组件Failed to resolve component: MyButton If this is a native custom element的更多相关文章

  1. [vue-router] Failed to resolve async component default: Error: Loading chunk 0 failed.

    在整合laravel5.4 和vue2.1的时候遇到一个奇怪的问题 Uncaught SyntaxError: Unexpected token < Error: Loading chunk 0 ...

  2. Vue-cli3.x在开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chunk {/d} failed.或者Uncaught SyntaxError: Unexpected token <错误

    使用Vue-cli3.x开发环境中(router采用 history模式)出现Failed to resolve async component default: Error: Loading chu ...

  3. 【Vue.js】vue引入组件报错:该组件未注册?

    [Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component cor ...

  4. Tomcat启动报错:org.apache.catalina.LifecycleException: Failed to start component...java.util.zip.ZipException: error in opening zip file

    1.项目环境 IntelliJ IDEA2018.1.6 apache-tomcat-8.0.53 基于springboot开发的项目 maven3.5.3 2.出现问题 从svn同步下项目 启动to ...

  5. ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[]]

    今天第一次遇到Failed to start component [StandardEngine[Catalina].StandardHost[localhost].错误,并且在错误提示的后半段出现了 ...

  6. Maven使用tomcat7-maven-plugin插件run时出现错误: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start component

    错误如下: A child container failed during startjava.util.concurrent.ExecutionException: org.apache.catal ...

  7. IDEA启动tomcat报错:java.lang.NoClassDefFoundError: org/springframework/context/ApplicationContext、ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component

    先看错误日志: -May- ::.M26 -May- :: :: UTC -May- ::29.845 信息 [main] org.apache.catalina.startup.VersionLog ...

  8. VUE3 之 组件传参

    1. 概述 韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才不会被周围的环境所左右,才能取得最终的胜利. 言归正传,之前我们 ...

  9. Android Studio:Failed to resolve ***

    更换电脑后,也更新了所有的SDK的tool,仍然报错:Failed to resolve  各种jar包,出现这种问题主要是因为在Android studio中默认不允许在线更新,修改方法如下:

  10. Vue.js报错Failed to resolve filter问题原因

    Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...

随机推荐

  1. Appium--滑动屏幕、不常用API

    1.滑动屏幕api #滑动屏幕 size = driver.get_window_size() #获取屏幕大小 width = size.get('width') #宽 height = size.g ...

  2. Go_day05

    Go基础语法 OOP面向对象 Go语言本身不是面向对象的语言,但是可以通过一些方法来模拟对象 面向对象的思维就是分类思维 继承 // 定义一个父类结构体 type Person struct { na ...

  3. python和java语法对比

      python java 不同的关键字 except,nolocal,as,assert,async,pass ,await,from,raise,global,in,del,with,lambda ...

  4. 配置环境变量在history中显示时间

    1.1.临时显示(断电丢失) 配置变量HISTTIMEFORMAT,加入"%F %T ". 示例: [root@CentOS8 ~]# HISTTIMEFORMAT='%F %T ...

  5. Centos 7 配置Tomcat跳转Https

    前言:在网络安全盛行的时代下,有时业务为了安全需求要使用https协议,包括http.nginx.tomcat等,本篇简单分享一下tomcat跳转https配置. 1.环境 Centos 7.9 2. ...

  6. Java面试——阻塞队列

    一.阻塞队列 [1]首先它是一个队列,而一个阻塞队列在数据结构中所起的作用大致如下图所示:

  7. Google Protobuf 编解码

    更多内容,前往个人博客 Protobuf 全称:Google Protocol Buffers,由谷歌开源而来,经谷歌内部测试使用.它将数据结构以 .proto 文件进行描述,通过代码生成工具可以生成 ...

  8. LeetCode 周赛 338,贪心 / 埃氏筛 / 欧氏线性筛 / 前缀和 / 二分查找 / 拓扑排序

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 上周末是 LeetCode 第 338 场周赛,你参加了吗?这场周赛覆盖的知识点很多,第 ...

  9. Hugging Face 社区中蓬勃发展的计算机视觉

    在 Hugging Face 上,我们为与社区一起推动人工智能领域的民主化而感到自豪.作为这个使命的一部分,我们从去年开始专注于计算机视觉.开始只是 Transformers 中 Vision Tra ...

  10. PyQt5学习 (2)--QWidget(上)

    描述:   1.所有可视控件的基类   2.是一个最简单的空白控件   3.控件时用户界面的最小元素:接收各种事件.绘制在桌面上,展示给用户看   4.每个控件都是矩形的,它们按Z轴顺序排序   5. ...