如何在Nuxt应用中通过layouts文件夹使用布局？配置后不生效怎么办

• 检查layouts文件夹位置是否正确：必须放在项目根目录，与pages文件夹、nuxt.config.js文件同级，不要嵌套到其他目录下
• 检查布局文件是否包含<Nuxt />插槽：所有布局文件的template中必须加入<Nuxt />组件，这是页面内容的渲染出口，缺少该标签会导致页面内容无法展示，看起来像布局未生效。基础示例如下：

<template>
  <div>
    <!-- 布局公共内容，如导航、页脚等 -->
    <Nuxt />
  </div>
</template>

• 检查nuxt.config.js是否自定义了布局目录：如果配置项中存在layoutsDir字段，说明修改了默认的布局文件读取路径，需要将布局文件放到配置的对应路径下，或者删除该配置项恢复根目录layouts的默认读取规则
• 检查布局名与文件名是否匹配：Nuxt 2 对文件名大小写敏感，如果你配置的是layout: 'sample'，对应布局文件名必须是sample.vue，如果文件名是Sample.vue就会识别失败
• 重启开发服务：新增layouts文件夹属于新增目录，Nuxt 2 的热更新可能不会自动识别该目录，直接停止当前yarn dev进程，重新运行启动命令即可生效

内容的提问来源于stack exchange，提问作者simpywatch