以下是一个基于 Nuxt 4 架构、面向复杂企业级后台系统的完整项目目录结构示例，结合了官方推荐、社区实践与真实项目经验，具备高度可扩展性和清晰的职责划分：
my-nuxt4-project/
├── app/ # 所有客户端代码集中目录（Nuxt 4 新结构）
│ ├── assets/ # 需构建的静态资源（scss、字体、图片等）
│ │ ├── css/
│ │ │ └── main.scss
│ │ └── fonts/
│ ├── components/ # 自动导入的 Vue 组件
│ │ ├── ui/ # 基础 UI 组件（按钮、表单、弹窗）
│ │ ├── layout/ # 布局相关组件（Sidebar、Header、Footer）
│ │ └── charts/ # 图表组件（ECharts、D3）
│ ├── composables/ # 自动导入的 Composition API 逻辑
│ │ ├── useAuth.ts # 权限处理
│ │ ├── useApi.ts # 统一 API 调用封装
│ │ └── useTable.ts # 列表页通用逻辑
│ ├── layouts/ # 页面级布局
│ │ ├── default.vue # 默认布局（含侧边栏、顶部栏）
│ │ ├── auth.vue # 登录/注册页布局
│ │ └── blank.vue # 空白布局（弹窗、预览页）
│ ├── middleware/ # 路由中间件
│ │ ├── auth.global.ts # 全局鉴权
│ │ ├── role.ts # 路由级角色控制
│ │ └── log.ts # 路由访问日志
│ ├── pages/ # 文件系统路由
│ │ ├── index.vue # 首页（重定向到 /dashboard）
│ │ ├── login.vue
│ │ ├── dashboard.vue
│ │ ├── system/
│ │ │ ├── user.vue
│ │ │ ├── role.vue
│ │ │ └── dept.vue
│ │ └── […slug].vue # 404 或其他通配路由
│ ├── plugins/ # 客户端插件
│ │ ├── vuetify.client.ts # UI 框架初始化
│ │ ├── dayjs.client.ts # 日期库
│ │ └── pinia.ts # 状态管理
│ ├── stores/ # Pinia 全局状态
│ │ ├── auth.ts
│ │ ├── app.ts # 全局设置、主题
│ │ └── menu.ts # 动态菜单
│ ├── utils/ # 通用工具函数
│ │ ├── request.ts # axios 二次封装
│ │ ├── validate.ts # 表单校验规则
│ │ └── constants.ts # 常量枚举
│ ├── app.vue # 应用根组件（全局入口）
│ ├── app.config.ts # 运行时配置（主题、i18n）
│ └── error.vue # 错误页（500/404）
├── shared/ # 前后端共享代码（类型、DTO、工具）
│ ├── types/
│ │ ├── api.d.ts
│ │ └── user.d.ts
│ └── utils/
│ └── date.ts
├── server/ # 服务端代码（Nitro）
│ ├── api/ # RESTful API
│ │ ├── auth/
│ │ │ ├── login.post.ts
│ │ │ └── logout.post.ts
│ │ ├── system/
│ │ │ ├── user.get.ts
│ │ │ └── user.post.ts
│ ├── middleware/ # 服务端中间件（日志、鉴权）
│ │ └── logger.ts
│ ├── plugins/ # 服务端插件（数据库连接）
│ │ └── db.ts
│ ├── utils/ # 服务端工具（加密、权限）
│ │ └── jwt.ts
│ └── routes/ # 非 /api 前缀的自定义路由
│ └── healthz.ts # /healthz
├── public/ # 纯静态资源（favicon、robots.txt）
│ ├── favicon.ico
│ └── images/
│ └── logo.png
├── modules/ # 本地开发的 Nuxt 模块
│ └── nuxt-module-i18n/
├── layers/ # 多应用共享层（微前端、主题系统）
│ └── admin-layer/
├── tests/ # 单元 & e2e 测试
│ ├── unit/
│ └── e2e/
├── .env # 环境变量
├── .env.example
├── .gitignore
├── nuxt.config.ts # 主配置文件
├── package.json
├── tsconfig.json # 一个 tsconfig 即可（Nuxt 4 特性）
└── README.md✅ 目录亮点说明
| 目录/文件 | 作用与最佳实践 |
|---|---|
app/ |
Nuxt 4 强制的新结构，所有客户端代码集中，IDE 感知更清晰，监听更快 |
shared/ |
前后端共享类型、DTO、工具，避免重复定义 |
server/ |
基于 Nitro 的服务端逻辑，支持热更新、无服务器部署 |
modules/ |
本地私有模块，便于拆分业务、发布内部包 |
layers/ |
多应用/主题继承，适合微前端或 SaaS 白标系统 |
✅ 迁移建议
- 旧项目想升级？
运行npx nuxt upgrade --dedupe即可平滑升级；目录结构不强制迁移，旧结构也能跑 。 - 新项目建议直接采用上述结构，提前享受更快的 HMR、类型推断和 IDE 体验 。
如需进一步模板，可直接使用官方 nuxt-ui-pro/dashboard 作为起点，再按此结构扩展。
nuxt 的一些搞法。
- 路由别名。比如你想访问 www.xxx.com 默认对应代码的 ./app/pages/index.vue 和 ./app.vue 文件。如果想对应 ./app/pages/home/index.vue,路由别名就很有用处了。
只需要在 ./app/pages/home/index.vue 中使用路由别名就好。如：
<template>
<h2>home</h2>
</template>
<script setup lang="ts">
definePageMeta({
alias: '/'
})
</script>这种方法，访问地址依然是 www.xxx.com。 初了使用路由别名，还可以使用中间件和redirect 的方式来实现。其实，这两种方式都是 redirect 。但是这个时候地址变成了 www.xxx.com/home 。方法如下。
方法一： ./app/pages/index.vue 依然存在，通过 definePageMeta 来做跳转。
// pages/index.vue
<script setup lang="ts">
definePageMeta({
redirect: '/home'
})
</script>方法二： 新建中间件 ./app/middleware/redirectRoot.ts 文件。加入以下代码
export default defineNuxtRouteMiddleware(() => {
if (useRoute().path === '/') {
return navigateTo('/home')
}
})然后在 nuxt.config.ts 中加入以下代码
export default defineNuxtConfig({
…,
nitro: {
routeRules: {
'/': { redirect: '/home' }
}
}
})看个人喜好，个人还是喜欢用路由别名，然后是中间件。确实有强迫症，不喜欢多一个 ./app/index.vue 文件。