Nuxt项目根路径/无法渲染页面 /index可正常加载index.vue

全新创建的Nuxt项目出现页面渲染异常：访问根地址（例如localhost:3000）时页面无任何渲染内容，但访问localhost:3000/index路径时，可正常渲染对应的index.vue文件。
预期目标：访问根路径/时可正常渲染index.vue文件内容。

components\
-Hero.vue

layouts\
-default.vue
-error.vue

pages\
-index.vue
-About.vue
-Contact.vue

pages/index.vue #

<template>
  <main>
    <Hero />
  </main>
</template>

<script>
export default {
}
</script>

<style lang="scss">
</style>

layouts/default.vue #

<template>
  <div>
    <MainHeader />
    <Nuxt />
    <Footer />
  </div>
</template>

<style lang="scss">
@import "../assets/scss/main.scss";
</style>

按优先级从高到低排查以下问题：

• 优先检查public目录静态文件冲突
  查看项目public目录下是否存在空的index.html文件。Nuxt对public目录下静态资源的匹配优先级高于页面路由，如果存在该文件，访问根路径/时会直接返回这个静态空文件，不会走pages/index.vue的渲染逻辑；而/index路径不会匹配该静态资源，因此可以正常渲染。
  解决方法：直接删除public目录下多余的index.html文件，重启开发服务即可。
• 检查自定义路由配置覆盖问题
  查看nuxt.config配置文件，检查是否存在错误的路由规则覆盖了根路径：
  • Nuxt3项目检查routeRules配置项
  • Nuxt2项目检查router.extendRoutes配置项
    如果存在手动将/路径指向空组件、错误重定向、错误缓存规则的配置，直接删除对应配置即可。Nuxt默认路由规则会自动将pages/index.vue同时映射到/和/index两个路径，不需要额外配置。
• 检查布局页面出口标签与Nuxt版本匹配
  • 如果使用Nuxt2：布局中页面出口使用<Nuxt />标签，当前写法正确，跳过此步
  • 如果使用Nuxt3：布局中页面出口需要使用<NuxtPage />标签，将default.vue中的<Nuxt />替换为<NuxtPage />即可
• 检查文件命名规范
  确认pages目录下的首页文件名为全小写index.vue，不要使用大写开头的Index.vue，在大小写敏感的操作系统（Linux、macOS默认分区格式）下，文件名大小写错误会导致路由映射异常。

所有修改完成后，重启开发服务、清空浏览器缓存再访问根路径即可正常渲染。

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