如何清理Nuxt js多余的div容器？

Question

这是我的示例页面：

这是 Nuxt 布局：

<template>
  <div>
    <Nuxt />
  </div>
</template>

这就是 Nuxt 编译器生成的结果：

如您所见，有几个无用的额外容器。 Nuxt 有什么方法可以摆脱它们吗？

Answer 1

这在 nuxt 的 github issues #3811 和 #1792

中已经提到过

无法删除

<div id="__nuxt">

，因为它是挂载Vue实例的根节点。

<div id="__layout">

也是如此，不可拆卸。

您仍然可以使用变量

globalName

配置选项修改应用程序名称（请参阅 pull #4012）。

Answer 2

如果几年后有人仍然遇到这个问题，您可以使用 Nuxt 3+（以及撰写本文时）来覆盖预期，您可以使用

rootTag

所以你的

nuxt.config.ts

可能看起来像这样：

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',

  app: {
    rootTag: 'body',
    rootId: 'app',
  },
})

使用此配置将所有 HTML 元素放入

<body>

中，内容包含在主包装 div 中，以保持内容更加整洁。

至于

<template></template>

标签，我已经看过 Nuxt 示例，并且也以 0 个问题完成了它，但是您可以拥有多个根元素或删除包装

<div>

，这只是添加了另一层嵌套元素。
例如

<template>
  <NuxtPage />
</template>