Nuxt4 目录结构

Nuxt 4 最显著的变化，是所有应用代码都移到了 app/ 目录下，理解这套目录约定，你就掌握了 Nuxt 一半的使用方法。

项目根目录

创建项目后，你会得到这样的结构：

my-nuxt-app/
├── app/                # 应用源码主目录（写代码的地方）
├── public/             # 静态资源目录，直接映射到服务器根路径
├── server/             # 服务端代码目录（API 接口、服务端中间件）
├── shared/             # 前后端共享代码目录（类型、工具函数）
├── .nuxt/              # 构建产物目录（自动生成，不要手动修改）
├── nuxt.config.ts      # Nuxt 配置文件
├── package.json        # 项目依赖与脚本
├── tsconfig.json       # TypeScript 配置
└── node_modules/       # 依赖包（自动生成）

app/ 目录

app/ 是 Nuxt 4 新增的应用源码根目录，里面按功能划分子目录，每个子目录都有特殊含义：

app/
├── app.vue            # 应用根组件，所有页面的入口
├── pages/             # 页面目录，文件即路由
├── components/        # 组件目录，自动导入
├── layouts/           # 布局目录，页面外壳
├── composables/       # 组合式函数，自动导入
├── utils/             # 工具函数，自动导入
├── plugins/           # 插件目录，启动时运行
├── middleware/        # 路由中间件目录
├── assets/            # 需要打包处理的静态资源
└── error.vue          # 全局错误页面

app.vue 是什么

app.vue 是应用根组件，相当于整个网站的”总入口”，最基础的内容长这样：

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

• <NuxtPage /> 负责渲染当前路由对应的页面
• <NuxtLayout> 负责套上布局外壳

后面的路由和布局两篇会详细讲解，现在只需要知道页面内容最终都会渲染在 <NuxtPage /> 的位置。

server/ 与 shared/ 目录

这两个目录是 Nuxt 全栈能力的体现：

server/
├── api/               # API 接口，如 server/api/users.get.ts
├── middleware/        # 服务端中间件，每个请求都会经过
└── utils/             # 服务端工具函数

• server/ 下的代码只在服务器运行，可写数据库、调用第三方服务，详见服务端接口
• shared/ 下的代码前后端都能用，适合放共享的类型定义和工具函数