Nuxt.js 默认布局未应用

Question

我是使用 Nuxt.js 的新手，并且遇到一个问题：当我创建项目时，布局文件夹没有按照文档自动生成。我手动添加了它，但 default.vue 没有在任何地方应用。这是layouts/default.vue：

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

我尝试过手动设置default页面布局和手动导入AppHeader组件default.vue（尽管这绝对不是问题，因为我放在那里的其他 HTML 也不会被渲染）。不知道这里出了什么问题，挠头。使用nuxt 2.15.7。如果需要任何其他详细信息，请告诉我，我很乐意提供，谢谢。

Answer 1

今天，我遇到了同样的问题，我只是停止 dev 命令并"npm run dev"再次执行。

它像魅力一样醒来。

Answer 2

面对同样的问题，它通过用以下内容包装 app.vue 的内容来解决：<NuxtLayout></NuxtLayout>

例子：

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

有关更多详细信息，请参见此处： https ://github.com/nuxt/framework/discussions/2883

Answer 3

我今天也遇到了这个问题，我花了大约15分钟才意识到......

我只是命名了我的文件夹layout而不是layouts:')

我发布它只是为了防止其他人像我一样分心

Answer 4

只需定义您的组件文件夹路径即可nuxt.config.js

例如：

components: {
    dirs: [
      '~/shared',
      '~/shared/atoms',
      '~/shared/molecules',
      '~/shared/organisams',
    ]
  },