索引页面未在 nuxt js localhost 3000 中呈现

Question

我希望我的应用程序有多个页面。我已经删除了app.vue文件并在pages文件夹中创建了pages文件夹和index.vue文件，但仍然没有在localhost3000中渲染

Answer 1

app.vue 文件需要有路由。

A minimal app.vue

来源

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

NuxtPage

将是您的路线上使用的组件。所以在

localhost:3000

上这将是

pages/index.vue

，在

localhost:3000/login

上这将是

pages/login.vue

。

NuxtLayout

是可选的，可以像下面这样删除。但除非您有

layouts

文件夹并定义了默认布局或页面布局，否则它不会执行任何操作。 更多信息

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

Answer 2

我也有同样的问题。我的解决方案是将 NuxtLayout 放在自闭合标签下，如下所示：

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

Answer 3

看起来无法自动导入组件。我认为路径中的反斜杠应该替换为斜杠：

当前：

components\global/AppHeader.vue

应该是：

components/global/AppHeader.vue

Answer 4

如文档中所述：

为了清楚起见，我们建议组件的文件名与它的文件名相匹配 名字。

• 所以你的组件应该位于

  components/global/app

  下 在您的情况下应命名为

  GlobalAppHeader.vue

  。

• 此外，Nuxt3 中的自动导入似乎无法正常运行，如here所述。现在最好显式声明组件路径。 所以在你的

  nuxt.config.ts

  中添加组件条目，所以它变成：

export default defineNuxtConfig({
 +   components: [
 +      '~/components/global/app/',
 +  ],
})

删除项目中的

.nuxt

文件夹并运行

yarn dev

。

希望有帮助！

Answer 5

奔跑

npm 我

在项目的根目录中