【Vue报错】在vscode里报错The template root requires exactly one element的解决方案

已于 2022-09-07 16:11:48 修改
阅读量1.4k 收藏 5
点赞数 4
分类专栏： vue踩坑 文章标签： vue.js vscode 前端
于 2022-09-07 16:08:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45388918/article/details/126747814
版权

报错场景
使用VScode创建vue项目时，加载了vetur插件。加载后出现报错。

报错内容
Vue Error: The template root requires exactly one element

报错原因
Vue2 中只允许里存在一个根节点。
但是vue3中可以存在多个根节点。
vetur按照了Vue2的标准所以报错。

解决方案
1、在 <template>中添加一个 <div>标签，之后所有的组件全部加在 <div>即可解决。
2、

  1. 打开vscode扩展
  2. 搜索vetur
  3. 点击vetur右下角的齿轮，点击扩展设置。
  4. 滑动到最下面的配置，取消vetur>validation>template的勾选。
  5. 问题解决
上帝会不会开电灯
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解vue 兼容IE报错解决方案
01-19
IE 页面空白 报错信息 此时页面一片空白 报错原因 Babel 默认只转换新的 JavaScript 语法（如箭头函数），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等新的对象或者方法。 例如 Promise 、新的原生方法如 String.padStart (left-pad) 等。为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容性补丁）的技术。 简单的说，兼容问题一般是IE 对于es6 的部分新对象、表达式，语法并不支持，解决方案是使用 babel-poly
vue--The template root requires exactly one element.的解决办法
最新发布
weixin_56181202的博客
03-14 841
vue--The template root requires exactly one element.的解决办法。报错原因： 在vue中会出现以上问题，这是因为vue的模版中只有能一个根节点，所以在中插入第二个元素就会报错。
The template root requires exactly one element的解决办法
pingguo函数的博客
11-10 1848
vue项目中出现The template root requires exactly one element的报错，是因为vue的template里只能有一个根节点，所以在中插入第二个元素就会报错
关于vue-resource报错450的解决方案
08-29
本篇文章主要介绍关于vue-resource报错450的解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
10-14
主要介绍了VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3报错The template root requires exactly one element
曈欣的博客
11-18 1902
vue3 项目报错：The template root requires exactly one element，大概意思是模板根目录下只需要一个元素。根目录下只能有一个跟元素，是 Vue2的要求，Vue3 中已经去掉了这个限制。那么如何解决这个错误提示呢？
Vue：The template root requires exactly one element.的解决办法
热门推荐
灿灿大王搭建的黄金屋
05-28 9万+
这是因为vue的模版中只有能一个根节点，所以在<template>中插入第二个元素就会报错 解决方案： 将<template>中的元素用一个大的<div>包起来，这样就可以在其中添加多个元素了，可以参考以下示例： <template> <div id="vue"> Hello Vue.js!{{message}} ...
the template root requires exactly one element
猪儿君的博客
03-03 1058
报错：the template root requires exactly one element 翻译：模板根只需要一个元素 解决方案： <template> <!-- 加上一个div 将整个内容框起来，以后任何内容，都要在这个大的div里面写， --> <div> <h1>Child组件显示成功</h1> <h1>{{msg}}</h1> </div> &lt......
[vue/valid-template-root]The template root requires exactly one element.错误。
weixin_42464106的博客
07-05 6099
出现如上图一样的错误提示，是因为Vue模版只能有一个根节点，所以需要改动一下即可。在 中添加一个 标签，之后所有的组件全部加在 即可解决。
Vue Element UI + OSS实现上传文件功能
01-19
Element提供了upload上传组件，可以查看官网upload组件的详细介绍；查看upload组件的上传源码upload/ajax，使用的是XHR对象上传文件。在项目实践中，发现该上传方法上传大文件时会出现问题，所以决定使用阿里云对象存储服务（Object Storage Service，简称OSS），OSS详细介绍可以查看官网，本文主要讲解的是OSS上传文件的前端，后台开发请查看官网介绍，SDK Browser.js讲解了前端如何进行上传。 1、使用npm安装SDK的开发包： npm install ali-oss 2、OSS配置 let OSS = require('ali-oss
VirtualBox 错误：This kernel requires the following features not present on the CPU
09-15
主要介绍了VirtualBox 错误：This kernel requires the following features not present on the CPU的相关资料,希望通过本文能帮助到大家，解决这样的问题，需要的朋友可以参考下
Vue：The template root requires exactly one element解决方案
weixin_44552249的博客
05-12 380
<template slot-scope="scope"> <el-button @click="editItem(scope.row.fid)" type="text" size="small" >编辑</el-button > <el-button @click="deleteItem(scope.row.fid)" type="text" size="small" >删除</el-button
vue报错：Vue Error: The template root requires exactly one element.
qq_37291053的博客
07-26 172
原因是template里只允许一个根节点。
vue3报错：The template root requires exactly one element终极解决办法
Y_soybean_milk的博客
04-22 2万+
兴冲冲的开启一个vue3项目，控制台却报错The template root requires exactly one element 我们知道，在vue2中，template中只能有一个根元素，但在vue3中，则去掉了这个限制 那么如何解决这个错误提示呢？ 方法一 可能是项目中引入的eslint报的错 解决方法：在项目的.eslintrc.js配置文件的rules中添加："vue/no-multiple-template-root": "off" rules: { 'no-console':
The template root requires exactly one element解决方法
weixin_57246351的博客
10-06 711
报错原因:模板根只需要一个元素。 错误代码 <template> <!-- 一级路由 --> <router-view></router-view> <div class="test">我是测试文字</div> </template> 正确代码 <template> <div> <!-- 一级路由 --> <router-view></
The template root requires exactly one element vue/no-multiple-template-root
weixin_64652648的博客
09-06 1107
当你在使用element的过程中出现了这个错误就代表<template></template>内出现了一个或几个<div></div>,且没有一个div将template内的代码全部包括起来，这个时候只需要加上一个div就可以解决这个问题。
vue报错：The template root requires exactly one element
ThisEqualThis的博客
11-22 1144
这段话的意思是：根模板必须有一个准确的元素。 在vue组件中会使用template标签，在template中，还需要一个标签元素将其他标签元素包裹起来，因为template标签是不会被DOM解析，生成DOM元素的时候会被隐藏。 //helloWorld.vue //正确写法 <template> <div> <h1>我是h1</h1> &l...
error The template root requires exactly one element vue/valid-template-root
07-28
这个错误通常发生在Vue模板中，它表示模板根元素必须包含且只能包含一个元素。Vue模板需要一个根元素来包裹模板中的所有内容，以确保正确的渲染。如果你的模板中有多个根元素，就会出现这个错误。 为了解决这个问题，你可以在模板的根元素外面再添加一个包裹元素，使得模板只有一个根元素。例如，你可以使用一个 `<div>` 元素将所有内容包裹起来。以下是一个示例： ```html <template> <div> <!-- 这里是你的模板内容 --> </div> </template> ``` 通过将内容包裹在一个单独的元素中，你就可以避免出现 "The template root requires exactly one element" 的错误。记得确保你的模板只有一个根元素，并且在根元素之外没有其他直接子元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值