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

 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. python - 命令行下一键更新所有包

    Python3.8以下这样一键更新所有包:from pip._internal.utils.misc import get_installed_distributionsfrom subprocess ...

  2. Springboot中@RequestBody接收的对象传入首字母大写的参数时,无法接收到参数值的问题解决

    在Vo对象中的变量上添加@JsonProperty("")注解 postman测试 转载:https://blog.csdn.net/qq_39069718/article/det ...

  3. Windows10系统快速安装.NET Framework3.5的方法&常见问题处理方法

    Windows10系统快速安装.NET Framework3.5的方法&常见问题处理方法 因为我的win10想了办法来禁止自动更新,就无法照正常办法安装.NET Framework3.5,解决 ...

  4. SQLServer游标(Cursor)简单例子

    DECLARE @username nvarchar(50),@password nvarchar(50),@num int--声明游标变量 DECLARE myCursor CURSOR FOR s ...

  5. MySQL视频学习 1-18小节

    地址:https://www.bilibili.com/video/av39807944/?p=16 1-15:撘环境.建表.数据类型(https://www.runoob.com/mysql/mys ...

  6. insert-text-at-cursor-in-a-content-editable-div

    https://stackoverflow.com/questions/2920150/insert-text-at-cursor-in-a-content-editable-div function ...

  7. 文件上传靶场 upload-labs Pass 5-10

    Pass-5 .user.ini文件 根据我的观察,最新版的upload-labs第五关和旧版的不一样,这一关可以使用和Pass-10一样的方法通过,但是,其他所有的关卡都禁止了.ini文件的上传,就 ...

  8. 2023 年最新最全的 React 面试题

    React 作为前端使用最多的框架,必然是面试的重点.我们接下来主要从 React 的使用方式.源码层面和周边生态(如 redux, react-router 等)等几个方便来进行总结. 1. 使用方 ...

  9. MyBatisPlus-------id生成策略

    不同的表对应不同的id生成策略 日志:自增 购物订单:特殊规则(FQ23324AK443) 外卖单:关联地区日期等信息( 10 04 20200314 34 91) 关系表:可省略id ....... ...

  10. Python类的继承,你了解多少?

    "三人行必有我师焉!"."不耻下问",中国的圣人先师孔子留下的文化瑰宝传承在生活中的每个角落. 孔子是中国古代最伟大的思想家.教育家.如果说中国有一种根本的立国 ...