vue3项目中App.vue中＜router-view/＞报错The template root require....

最新推荐文章于 2025-05-07 16:15:42 发布

sdu@xy

最新推荐文章于 2025-05-07 16:15:42 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：项目实训

本文链接：https://blog.csdn.net/qq_44787993/article/details/118358480

项目实训专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个常见的Vue3项目创建时遇到的问题：在App.vue文件中出现的错误提示'The template root requires exactly one element'。此问题源于Vetur插件误将Vue3项目识别为Vue2项目。文章提供了通过在<template>标签内添加<div>标签来解决该问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

在创建新的vue3项目时，src目录下的
App.vue文件中的会自动报错The template root requires exactly one element.

原因分析：

这是Vetur认为这是一个Vue 2项目，因为它位于VS Code工作区中。
而Vue2只允许模板里存在一个根节点。

解决办法：

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

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
     <router-view/>
  </div>