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

 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. pymysql安装后使用报错处理

    1.django启动报错: Error loading MySQLdb module. Did you install mysqlclient? 原因:初次安装配置pymysql时需要在__init_ ...

  2. 【Golang】数据库使用

    非结构化方式获取数据库结果 动态列获取结果 https://github.com/go-sql-driver/mysql/wiki/Examples#rawbytes

  3. 实验五:开源控制器实践——POX

    基本要求 1.tcpdump 验证Hub模块 h1 ping h2的tcpdump抓包结果截图 h1 ping h3的tcpdump抓包结果截图 2.tcpdump 验证Switch模块 h1 pin ...

  4. DVWA-XSS (DOM) DOM型跨站脚本攻击

    XSS(Cross Site Scripting),跨站脚本攻击,能使攻击者在页面嵌入一些脚本代码,用户再访问,被诱导点击时,执行恶意脚本,常见为javascript,也有Flash.VBscript ...

  5. RPA的概念和优势

    大多数人每天都会使用到一些机器人流程自动化的工具,例如读取邮件和系统,计算.生成文件和报告.而在未来,那些你不想做的枯燥的工作,也许真的可以不做了,重复化.标准化的工作都可以让机器人帮你完成.想必此刻 ...

  6. Android笔记--常用布局

    线性布局--LinearLayout 线性布局的方向 orientation属性值:若为horizontal,内部视图在水平方向从左往右排列 若为vertical,内部视图在垂直方向从上往下排列 如果 ...

  7. Linux0.11源码学习(四)

    Linux0.11源码学习(四) linux0.11源码学习笔记 参考资料: https://github.com/sunym1993/flash-linux0.11-talk https://git ...

  8. Solon2 接口开发: 强化 Gateway 模式

    一般可以从这几方面对 Gateway 模式进行强化: 定制异常状态码 定制基类 将一些处理独立封装成类 接口只返回数据部份,异常状态用抛 强化之后,具体的网关即简单,又功能强大.同时会对团队开发形成一 ...

  9. java数组排序及查找方法

    前言 在上一篇文章中,壹哥给大家讲解了数组的扩容.缩容及拷贝方式.接下来在今天的文章中,会给大家讲解更重要的数组排序及查找方法.今天的内容会有点难,希望你不要因此而退缩,挺过这一关,你会向上突破的! ...

  10. flex弹性盒子中flex-grow与flex的区别

    ​大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性, flex-grow 属性用于设置父元素剩余空间的瓜分比例, flex 属性是 flex-grow.flex-shrink  ...