关于创建vue3项目 vscode的vetur插件依然报错需要template有根标签解决方法

解决Vue3项目在VSCode中vetur插件的报错问题
最新推荐文章于 2025-10-13 17:02:30 发布
原创 最新推荐文章于 2025-10-13 17:02:30 发布 · 2.1k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

当vetur插件将Vue3项目错误地识别为Vue2并导致模板错误时，可以按照以下步骤解决：在package.json中添加eslintConfig规则，关闭'vue/no-multiple-template-root'，然后重启VSCode。这将关闭该特定判断，不影响vetur全局设置。

为了解决vscode的vetur插件 把vue3项目当成vue2去检查 然后出现了报错非要template下仍然有要标签的报错

我找到了以下方法，这个不会影响vetur的设置本身，只会对当前的项目生效

第一步：打开你的package.json
第二步：

  "eslintConfig": {
    "rules": {
      "vue/no-multiple-template-root": "off"
    }
  }

把这个配置放到里面去，通过规则关闭这个判断
第三步： 重启vsCode

vue3：The template root requires exactly one element详细排查解决方法，不是template节点的问题检查了很多依旧提示错误（vue3运行/打包时报错）
高级前端工程师
08-18 3446
【vue 报错】The template root requires exactly one element，Vue3模板根节点报错：template root requires exactly one element如何解决？模板必须有一个根元素来包裹所有的子元素，vue3提示只能有一个根元素，Vue：The template root requires exactly one element.的解决办法，vue的模版中只能有一个根节点，template中插入第二个元素就会报错，根节点没有问题怎么办，di
详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
qq_44552416的博客
01-17 2699
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
vue3 Vetur报错：has no default export 组件没有默认导出
KingShy1的博客
01-26 7253
2.解决方法 ：在vscode中的setting.json中添加一下代码。1.报错如下：虽然程序不会报错，但是看着难受。3.重启vscode就可以了。
vscode中vue3项目vetur报错
solocao的专栏
05-03 4208
vue3支持的插件应该是volar，之前有老的vue2项目插件vetur，所以会报错。 解决办法：在项目中新建.vscode, 新建文件settings.json,里面内容如下： { "vetur.validation.template": false, "vetur.validation.script": false, "vetur.validation.style": false, } 最后重启vscode解决问题 ...
VSCode 插件 Vue3 + Vite + Ts 开发必备的
最新发布
weixin_43923808的博客
10-13 611
TypeScript Hero 是一个为 TypeScript 设计的 VSCode 插件，它提供了丰富的 TypeScript 功能，如智能提示、自动补全、类型检查等。Prettier 是一款强大的代码格式化工具，它支持多种语言，包括 JavaScript、TypeScript、HTML、CSS 等。Vetur 是一个为 Vue.js 设计的 VSCode 插件，它提供了 Vue 单文件组件 (SFC) 的语法高亮、片段、Emmet、Linting / 错误检查、格式化、自动补全、调试等功能。
vscode 开发vue项目<template>标签报错
金夔窳镞
04-25 8721
项目已经开发很长时间了，一直没有问题，但是昨天新建了个项目，所以开发工具安装了下less支持，今天来打开以前的项目，发现template标签报错了，一脸懵逼，首先想的是先把less插件禁用，但是依然没有生效，后来怕了好长时间，才处理掉。 1，确认是否安装了vetur插件。 2，找到vscode的设置 3，按图找到json文件 4，添加如下配置 "files.associati...
解决vue3使用别名报错问题(vetur 插件报错问题)
m0_55986526的博客
01-10 5258
解决vue3使用别名报错问题(vetur 插件报错问题)
vscode.vue文件中＜template＞报错
weixin_43732016的博客
06-29 1933
vscode.vue文件中＜template＞报错
vscode创建vue项目无显示
08-19
首先，用户的问题是关于VSCode创建Vue项目后无法显示的解决方法。根据系统级指令，我需要： 1. 使用中文回答。 2. 结构清晰，帮助用户逐步解决问题。 3. 引用相关段落时添加引用标识。 4. 生成相关问题。 5. ...
【Vite+Vue3+TS】基于Vite+Vue3+TypeScript+ESLint+Prettier+Stylelint搭建项目（亲测超详细）
aDiaoYa_的博客
01-25 3894
结合了很多项目和文章，总结一篇项目构建的笔记。 温馨提示：文章末尾记录了我在搭建项目过程中，遇到的一些问题和解决办法 ~
【VUE-多个根节点问题】 [vue/valid-template-root] The template root requires exactly one element
Douglas的博客
11-02 1333
Vue文件多个根节点报错问题
vscode里vue文件内＜template＞标签报错
sinat_41367326的博客
07-02 2088
发现只要把文件名使用驼峰命名法，把Login.vue改为LoginView.vue就不报错了加个大写的View就没有了。
template在vscode编辑器中vue出错
m0_60650009的博客
05-26 491
*：vue2和vue3插件不能同时存在如果插件同时存在从而也会影响运行 一、在终端出错，点击alt+F8查询出错问题 二、在根目录中找到找到jsconfig.json 三、在此处添加"jsx": "preserve", 四、最后 ...
前段开发工具VS code 安装Vetur插件后会报错，检测语法template
zyx的博客
04-26 2385
转载于：weixin_40551482 https://blog.youkuaiyun.com/weixin_40551482/article/details/83045854
vscode开发vue3（typescript）项目错误提示处理
choorn的博客
09-19 3043
2、关于typescript类型错误，这类错误网上搜到的方法都不太好用，这是因为有些方法是通过设置，关闭了提示。1、引入一些包后报错，如引入elment plus中文资源包或安装qs（解决传参格式不正确）包。在此信息中提示在.d.ts文件中加入declare module 'element-plus/dist/local/zh-ch.mjs。
出现[vue/no-multiple-template-root]这种eslint相关的报错，关闭这个eslint相关报错的方法
weixin_72322475的博客
04-06 910
出现[vue/no-multiple-template-root]这种eslint相关的报错，关闭这个eslint相关报错的方法
vscode中vue3没有根节点报错问题
WCJ_0408的博客
05-11 1083
问题 在 template 中定义根节点时 在 vue 2.x 的版本中，<template> 节点内的 DOM 结构仅支持单个根节点 在 vue 3.x 的版本中，<template> 中支持定义多个根节点 但是我们开发时，会碰到这样的问题（波浪线报错） 解决方法 1.打开设置 2.搜索eslint 取消勾选 3.重启VSCode 再打开时，红色的波浪线就消失了 转载请注明出处，谢谢 ...
解决使用vscode对vue3的template检测报错问题
qq_43397696的博客
03-26 7139
在使用vscode写vue3代码时，对template中的内容进行了格式检测： 原因： Vetur插件对template使用eslint-plugin-vue进行了检测,没有支持vue3的新特性，所以需要把这个检测关闭。 解决： 在vscode的设置-》扩展-》vetur-》Validtion：template取消选中即可。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210326103314589.png?x-oss-process=image/wa
解决Vue3项目使用多个根标签提示[vue/no-multiple-template-root]The template root requires an element rather than
qq_45569925的博客
05-29 1088
报错截图 检查原因 第一步：检查是否安装了Vetur插件 第二步：左下角设置图标 ==》 设置 第三步：进入设置页面搜索 eslint 把 Vetur 的验证模板，取消勾选Validate vue-html in using eslint-plugin-vue 第四步：将错误提示页面关掉然后重新打开，即可正常显示
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值