Vue修改组件名大小写后，报错Vetur(1261)问题解决办法

已于 2023-09-03 15:17:47 修改
阅读量772 收藏 2
点赞数 4
分类专栏： vue 文章标签： vue.js 前端 vscode
于 2023-09-03 14:42:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyangfangyang/article/details/132650096
版权

vscode中发现组件名称命名未大写，修改后出现如下vetur报错：

在这里插入图片描述

Already included file name 'CommonTag.vue' differs from file name 'commontag.vue' only in casing.
  The file is in the program because:
    Root file specified for compilation
    Imported via "CommonTag.vue" from file 'views/Main.vue'
    Root file specified for compilation Vetur(1261)

解决办法1：

  1. 禁用vetur插件
  2. 重启vscode 发现报错没了
  3. 无异常后再启用vetur即可

解决办法2：

去掉组件的.vue后缀
在这里插入图片描述

小羊儿放羊儿
关注
专栏目录
Vue组件命名包含大写字母提示组件未正确注册的error
u012565397的博客
03-15 440
错误代码： <body> <div id="myApp"> <h1>组件学习</h1> <myComponent></myComponent> </div> <script> //该组件无法显示 Vue.component('myComponent',{ template:'<div>&
Vue环境搭建并创建项目(内含搭建过程中大部分错误的解决办法，亲测有效！！)
qq_52367032的博客
07-23 1632
Vue框架环境搭建+项目创建，覆盖了搭建环境中大部分可能遇到的问题，踩过的坑都在里面了，亲测有效！！
The file is in the program because: Imported via xxx Root file specified for compilation Vetur(1261)
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
04-21 1万+
问题 今天用 vscode 编辑器编写 vue 组件的时候， 由于自己改变了组件的文件名，导致引用组件的时候出现了 Vetur(1261) 的报错，报错现象如下： 解决方式 目前我的解决方式就是：保存好文件之后，关闭 vscode 编辑器，然后在打开就没有报错提醒了。这个问题通常是 vscode 引起的，一般是你很快的重命名了自己的文件。 ......
VSCode 报错 vetur提示错误Cannot find name ‘template‘ vetur(2304) 解决办法
最新发布
qq_43596552的博客
08-08 506
打开文件--首选项--设置中搜索Vetur，拉到最底部，把这四块的勾去掉。注意：是四个（网上有很多解决办法都是勾掉三个，亲测还是报错，还需要把上面的ts勾掉）如果在<template>标签中的很多变量都报错 报错信息为Cannot find name 'xxxx'首先强调一下 我的vetur版本为（0.36.1）不行的话 还可以把最后一个选项勾掉。
vue 自定义组件，组件名大写会报错
weixin_34080571的博客
12-27 2275
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3 Vetur报错：has no default export 组件没有默认导出
KingShy1的博客
01-26 5295
2.解决方法 ：在vscode中的setting.json中添加一下代码。1.报错如下：虽然程序不会报错，但是看着难受。3.重启vscode就可以了。
Vue部署到服务器之后，由于组件名大小写导致页面加载报错
qq_40018541的博客
04-29 1363
# Vue部署到服务器之后，由于组件名大小写导致页面加载报错 先看下面截图所示，在Windows环境下项目启动页面加载没有任何问题。 项目部署服务器之后，加载页面报错update组件未定义，原因是由于前端人员的疏忽，组件名定义与引用不一致，服务器环境必须大小写统一，把组件名称与引用组件相统一即可。
vue小项目
Lily68910的博客
03-16 1871
电商电商业务描述多端电商后台开发模式启动后台项目项目初始化步骤如下1.码云创建仓库2.本地创建项目3.使用git把项目推送到远程仓库4.配置Element-UI安装项目引入5.配置axios6 删除组件和视图7.代码格式校验登录1.登录逻辑２.创建新分支login3.修改根组件4.创建登录组件index.vue 模板样式和安装 less-loader因版本问题报错的解决方案：全局样式添加路由添加第三方字体添加表单验证使用axios请求登录接口异步改造登陆成功跳转 电商 业务描述 多端 客户使用的业务服务：P
Vue 2.0 学习笔记（四）
weixin_44772326的博客
01-10 4067
组件和生命周期：Vue中的组件化开发，组件的生命周期，组件之间的数据共享传值，ref引用。
Vue第五天学习总结——Vue全家桶之前端工程化(模块化相关规范、webpack、Vue单文件组件、Vue脚手架、组件库——Element-UI 的基本使用)
weixin_52819925的博客
08-27 994
(一) 模块化相关规范 1. 模块化概述 传统开发模式的主要问题 命名冲突：多个js文件中的同名变量会冲突 文件依赖：js文件之间无法相互引用问题 通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护 2. 浏览器模块化规范 AMD Require.js (http://www.requirejs.cn/) CMD Se
Vue笔记（三）Vue脚手架（Vue CLI）
Tml的博客
10-05 1021
使用脚手架、render函数、ref属性、配置项props、mixin混入、插件、scoped样式、组件化编码流程、WebStorage、组件的自定义事件、全局事件总线（GlobalEventBus）、消息的订阅与发布、nextTick（生命周期钩子）、Vue封装的过渡与动画
vetur 插件报错 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
u011866450的专栏
09-15 245
记录一下 vetur 插件内存报错的教训 具体讨论在这里 https://github.com/vuejs/vetur/issues/2276 由于本人的视频格式是m3u8格式 这样 工程中的 就出现了 .ts文件 然后 vetur可能会把 ts文件误以为 typescript 去检查它 ，因为视频文件很多 导致内存暴涨 最终导致 爆掉，现在解决办法是 我把ts重命名了 TS文件 具体命令 ffmpeg -i xxx.mp4 -c copy -map 0 -f segment -segment_list x
重命名vue 文件夹导致报错无法 npm run serve
m0_51989086的博客
12-12 596
解决方法: 删除 node_modules 文件夹，重新运行 cnpm i ，然后执行 npm run serve。
Vue报错：Root file specified for compilation Vetur(1261)
一枚不断学习的小码农一枚~
04-13 9646
在vue项目中遇到如下错误 module "/Users/lin/Documents/web前端/webpack4-learning/webpack-vue/src/components/IsAsyncDemo.vue" Already included file name '/Users/lin/Documents/web前端/webpack4-learning/webpack-vue/src/components/IsAsyncDemo.vue' differs from file name '/Use
vue 插件vetur提示错误
热门推荐
weixin_41790041的博客
03-12 1万+
vetur插件提示 [Elements in iteration expect to have 'v-bind:key' directives错误的解决办法  vscode->首选项->设置->搜索（vetur） 搜索vetur.validation.template 设置为false即可
vue name命名错误 Do not use built-in or reserved HTML elements as component
god_sword_的博客
08-05 3503
在项目中我使用的是header 作为组件名称，但是在前端html中这个是内置组件来的，名称已被占用不能再使用这些名称了。这里指的是components的名称命名不正确。若引用改了还是报错啦，可以查看下vue页面的。把命名修改一下，避免名称冲突就好了。是不是也名称冲突了。
vscode报错Vetur can‘t find ‘tsconfig.json‘ or ‘jsconfig.json‘
个人网站：https://www.longzipeng.online
02-21 4185
vscode报错Vetur can‘t find ‘tsconfig.json‘ or ‘jsconfig.json‘
Vetur 文件标红 报错 Component name “index“ should always be multi-word.eslint-plugin-vue
jsbxjk的博客
02-20 734
Vetur Component name "index" should always be multi-word.eslint-plugin-vue
vue子组件引用过滤器公共方法报错
09-07
在Vue中，子组件引用过滤器公共方法时可能会出现报错。报错通常是因为子组件无法直接访问或使用父组件中定义的过滤器方法。 解决这个问题的一种方式是将过滤器方法定义为全局过滤器，这样在任何组件中都可以使用。在Vue的入口文件(main.js)中使用Vue.filter()方法来定义全局过滤器，例如： ``` // 定义全局过滤器 Vue.filter('myFilter', function(value) { // ... }) new Vue({ // ... }) ``` 然后，在子组件中就可以直接使用这个全局过滤器了： ``` <template> <div> {{ someValue | myFilter }} </div> </template> ``` 另外，如果你希望在子组件中使用父组件中定义的过滤器方法，可以通过props将过滤器方法传递给子组件。在父组件中定义一个过滤器方法，并通过props传递给子组件，子组件可以使用传递过来的过滤器方法进行数据处理。 父组件： ``` <template> <div> <child-component :filterMethod="myFilter"></child-component> </div> </template> <script> export default { data() { return { // ... } }, methods: { myFilter(value) { // ... } } } </script> ``` 子组件： ``` <template> <div> {{ someValue | filterMethod }} </div> </template> <script> export default { props: ['filterMethod'], data() { return { // ... } }, // ... } </script> ``` 通过上述方法，你可以在子组件中使用父组件中定义的过滤器方法进行数据处理，避免报错的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值