【Vue3】引入组件Failed to resolve component: MyButton If this is a native custom element
引入组件时页面上并没有出现组件的影子,其他元素正常,初步确定是组件引入部分语法出了问题,打开开发者工具看到控制台报出错误代码:
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的更多相关文章
- [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 ...
- 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 ...
- 【Vue.js】vue引入组件报错:该组件未注册?
[Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component cor ...
- 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 ...
- ContainerBase.addChild: start: org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[]]
今天第一次遇到Failed to start component [StandardEngine[Catalina].StandardHost[localhost].错误,并且在错误提示的后半段出现了 ...
- 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 ...
- 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 ...
- VUE3 之 组件传参
1. 概述 韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才不会被周围的环境所左右,才能取得最终的胜利. 言归正传,之前我们 ...
- Android Studio:Failed to resolve ***
更换电脑后,也更新了所有的SDK的tool,仍然报错:Failed to resolve 各种jar包,出现这种问题主要是因为在Android studio中默认不允许在线更新,修改方法如下:
- Vue.js报错Failed to resolve filter问题原因
Vue.js报错Failed to resolve filter问题原因 金刚 vue Vue.js js javascript 之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错 ...
随机推荐
- pymysql安装后使用报错处理
1.django启动报错: Error loading MySQLdb module. Did you install mysqlclient? 原因:初次安装配置pymysql时需要在__init_ ...
- 【Golang】数据库使用
非结构化方式获取数据库结果 动态列获取结果 https://github.com/go-sql-driver/mysql/wiki/Examples#rawbytes
- 实验五:开源控制器实践——POX
基本要求 1.tcpdump 验证Hub模块 h1 ping h2的tcpdump抓包结果截图 h1 ping h3的tcpdump抓包结果截图 2.tcpdump 验证Switch模块 h1 pin ...
- DVWA-XSS (DOM) DOM型跨站脚本攻击
XSS(Cross Site Scripting),跨站脚本攻击,能使攻击者在页面嵌入一些脚本代码,用户再访问,被诱导点击时,执行恶意脚本,常见为javascript,也有Flash.VBscript ...
- RPA的概念和优势
大多数人每天都会使用到一些机器人流程自动化的工具,例如读取邮件和系统,计算.生成文件和报告.而在未来,那些你不想做的枯燥的工作,也许真的可以不做了,重复化.标准化的工作都可以让机器人帮你完成.想必此刻 ...
- Android笔记--常用布局
线性布局--LinearLayout 线性布局的方向 orientation属性值:若为horizontal,内部视图在水平方向从左往右排列 若为vertical,内部视图在垂直方向从上往下排列 如果 ...
- Linux0.11源码学习(四)
Linux0.11源码学习(四) linux0.11源码学习笔记 参考资料: https://github.com/sunym1993/flash-linux0.11-talk https://git ...
- Solon2 接口开发: 强化 Gateway 模式
一般可以从这几方面对 Gateway 模式进行强化: 定制异常状态码 定制基类 将一些处理独立封装成类 接口只返回数据部份,异常状态用抛 强化之后,具体的网关即简单,又功能强大.同时会对团队开发形成一 ...
- java数组排序及查找方法
前言 在上一篇文章中,壹哥给大家讲解了数组的扩容.缩容及拷贝方式.接下来在今天的文章中,会给大家讲解更重要的数组排序及查找方法.今天的内容会有点难,希望你不要因此而退缩,挺过这一关,你会向上突破的! ...
- flex弹性盒子中flex-grow与flex的区别
大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性, flex-grow 属性用于设置父元素剩余空间的瓜分比例, flex 属性是 flex-grow.flex-shrink ...