Nuxt 目录结构

Nuxt 应用程序具有特定的目录结构，用于组织代码。该结构设计为易于理解且使用方式统一。

根目录

Nuxt 应用程序的根目录是包含 nuxt.config.ts 文件的目录。此文件用于配置 Nuxt 应用程序。

应用目录

app/ 目录是 Nuxt 应用程序的主目录。它包含以下子目录：

• assets/：网站的资源文件，会由构建工具（Vite 或 webpack）处理
• components/：应用程序的 Vue 组件
• composables/：添加 Vue 组合式函数
• layouts/：包裹页面并避免在页面之间重新渲染的 Vue 组件
• middleware/：在导航到特定路由之前运行代码
• pages/：基于文件的路由，用于在 Web 应用程序中创建路由
• plugins/：在创建 Nuxt 应用程序时使用 Vue 插件等
• utils/：在应用程序中添加函数，以便在组件、组合式函数和页面中使用。

此目录还包含特定文件：

• app.config.ts：应用程序中的响应式配置
• app.vue：Nuxt 应用程序的根组件
• error.vue：Nuxt 应用程序的错误页面
• spa-loading-template.html：客户端渲染（ssr: false）页面初始化时显示的加载屏幕

公共目录

public/ 目录包含 Nuxt 应用程序的公共文件。此目录中的文件会在根路径下提供，且不会由构建过程修改。

适用于必须保持文件名不变（例如 robots.txt）或内容不常变化（例如 favicon.ico）的文件。

服务器目录

server/ 目录包含 Nuxt 应用程序的服务器端代码。它包含以下子目录：

• api/：包含应用程序的 API 路由。
• routes/：包含应用程序的服务器路由（例如动态 /sitemap.xml）。
• middleware/：在处理服务器路由之前运行代码
• plugins/：在创建 Nuxt 服务器时使用插件等
• utils/：在应用程序中添加函数，以便在服务器代码中使用。

共享目录

shared/ 目录包含 Nuxt 应用程序和 Nuxt 服务器的共享代码。这些代码既可以在 Vue 应用程序中使用，也可以在 Nitro 服务器中使用。

测试目录

test/ 目录是存放应用程序测试（单元测试、Nuxt 运行时测试和端到端测试）的推荐位置。有关目录布局和设置详情，请参阅组织测试。

内容目录

content/ 目录由 Nuxt Content 模块启用。它用于使用 Markdown 文件为应用程序创建基于文件的 CMS。

模块目录

modules/ 目录包含 Nuxt 应用程序的本地模块。模块用于扩展 Nuxt 应用程序的功能。

Layers 目录

layers/ 目录可用于组织和共享可复用的代码、组件、组合式函数和配置。此目录中的 Layers 会在项目中自动注册。

Nuxt 文件

• nuxt.config.ts 文件是 Nuxt 应用程序的主配置文件。
• .nuxtrc 文件是配置 Nuxt 应用程序的另一种语法（适用于全局配置）。
• .nuxtignore 文件用于在构建阶段忽略根目录中的文件。