目录结构
当你从 Github 获取项目源代码后，项目的主要目录结构如下，这是一个典型的 Nuxt3 目录：
├── config/ # 配置文件目录
├── content/ # 内容文件目录，用于存放 Markdown 文档
├── layouts/ # 布局组件目录
├── modules/ # Nuxt 模块目录
├── pages/ # 页面组件目录
├── public/ # 静态资源目录
├── server/ # 服务端代码目录
├── sql/ # SQL 文件目录
├── stores/ # Pinia状态管理目录
├── styles/ # 全局样式目录
├── components.json # UI 组件配置文件
├── tailwind.config.ts # Tailwind CSS 配置文件
├── tsconfig.json # TypeScript 配置文件
├── .env.local.example # 环境变量示例文件
├── .gitignore # Git 忽略文件配置
├── app.vue # 应用程序的根组件
├── error.vue # 错误页面组件
├── nuxt.config.ts # Nuxt.js 配置文件
├── package.json # 项目依赖配置文件
└── README.md # 项目说明文档
根目录
config/: 存放项目的各种配置文件，如数据库配置、API 配置等content/: 使用 Nuxt Content 模块管理的内容文件，主要存放 Markdown 文档layouts/: 页面布局组件，定义了不同页面的通用布局结构modules/: 自定义的 Nuxt.js 模块，用于扩展项目功能pages/: 基于文件系统的路由页面组件public/: 静态资源文件，如图片、字体等server/: 服务端 API 路由和中间件sql/: 数据库相关的 SQL 文件stores/: 使用 Pinia 的状态管理文件styles/: 全局 CSS 样式文件
config/ 配置文件
├── ai
│ └── index.ts
├── api
│ └── index.ts
├── checkout
│ └── index.ts
├── db
│ └── tables.ts
├── error
│ └── supabase.ts
├── products
│ └── index.ts
└── taiwindcss
└── index.ts
config/ai/index.ts是 AI 相关的配置文件
export default {
enable: true,
};
config/api/index.ts是 API 相关的配置文件，这里定义了 NuxtBase 的 API 路由
export default {
// billing
checkout: "/api/checkout",
// auth
signin: "/api/auth/signin",
signup: "/api/auth/signup",
oauth: "/api/auth/oauth",
oauthCallback: "/api/auth/oauth/callback",
sendPhoneCode: "/api/auth/send-phone-code",
// user
subscription: "/api/user/subscription",
};
config/checkout/index.ts是 checkout 相关的配置文件，你可以在修改provider来切换支付提供商，比如zpay、yipay、stripe。其余的都不需要变化
export default {
provider: "zpay", // 支付提供商: zpay | yipay | stripe
// 支付成功后跳转的URL
successUrl: process.env.PAYMENT_SUCCESS_URL,
// zpay支付
zpay: {
pid: process.env.ZPAY_PAY_PID,
webhookUrl: process.env.ZPAY_WEBHOOK_URL,
type: process.env.ZPAY_PAY_TYPE,
},
// 易支付
yipay: {
pid: process.env.YIPAY_PID,
type: process.env.YIPAY_PAY_TYPE,
webhookUrl: process.env.YIPAY_WEBHOOK_URL,
},
// stripe支付
stripe: {
priceId: process.env.STRIPE_PRICE_ID,
},
};
config/db/tables.ts是数据库表的配置文件，对应supabase数据库的表名，你可以在修改DB_TABLES来添加或删除数据库表
export const DB_TABLES = {
PAYMENT_HISTORY: "nuxtbase_payment_history",
USER_SUBSCRIPTION: "nuxtbase_user_subscription",
NOTE: "nuxtbase_demo_notes",
USER_SUBSCRIPTION_TOKEN: "nuxtbase_user_subscription_token",
USER_ONETIME_TOKEN: "nuxtbase_user_onetime_token",
USER_TOKEN_HISTORY: "nuxtbase_user_token_history",
};
config/error/supabase.ts是 supabase 相关的配置文件，你可以在修改supabaseErrorMessages来添加或删除错误信息
export const supabaseErrorMessages: Record<
string,
{ statusCode: number; message: string }
> = {
// 认证相关错误
"Invalid login credentials": { statusCode: 401, message: "邮箱或密码错误" },
"Email not confirmed": {
statusCode: 401,
message: "邮箱未验证，请先验证邮箱",
},
"Invalid verification code": {
statusCode: 400,
message: "验证码错误或已过期",
},
"Password is too weak": {
statusCode: 400,
message: "密码强度太弱，请使用包含大小写字母、数字和特殊字符的密码",
},[]
...
};
config/products/index.ts是产品相关的配置文件，你可以在修改products来添加或删除产品
type Product = {
id: string; // 产品ID
name: string; // 产品名称
description: string; // 产品描述
price: number; // 产品价格
price_currency: string; // 价格所对应的货币 (如: CNY, USD)
price_symbol: string; // 价格符号 (如: ¥, $)
interval_unit?: string; // 订阅间隔单位 (如: month, year)
mode: "subscription" | "one_time"; // 付款模式: subscription(订阅) 或 one_time(一次性)
subscription_duration?: number; // 订阅时长，单位天，仅在订阅模式下有效
stripe_price_id?: string; // Stripe价格ID
stripe_mode?: "subscription" | "payment"; // Stripe支付模式
features: string[]; // 产品特性列表
token_limit?: number; // 令牌限制，仅在AI模式下有效(需配置config/ai.ts)
};
export const ONE_TIME_PRODUCTS: Product[] = [
{
id: PRODUCTS_IDS.TEST_ONE_TIME,
name: "Basic One-Time",
description: "基础功能包，一次性购买永久使用",
price: 3,
price_currency: "CNY",
price_symbol: "¥",
interval_unit: "次",
mode: "one_time",
stripe_mode: "payment",
stripe_price_id: "price_1QMNBQGr5dzKVilATZT0KZIW",
features: [
"永久使用授权",
"基础技术支持",
"核心功能永久访问",
"3,000 tokens",
],
token_limit: 3000,
},
];
config/taiwindcss/index.ts是 Tailwind CSS 的配置文件，你可以在修改theme来添加或删除 Tailwind CSS 的主题
content/ md 文件
content 目录是 Nuxt Content 模块管理的内容文件，主要存放 Markdown 文档，你可以在这里添加或删除文档
├── blog
│ └── 1.test.md
├── docs
│ ├── guide
│ │ ├── intro.md
│ │ └── quick-start.md
│ ├── meta.json
│ └── more
│ └── contact.md
└── legal
├── privacy.md
└── terms.md
blog/: 博客目录，用于存放博客文章docs/: 文档目录，用于存放文档legal/: 法律相关目录，用于存放隐私政策和条款
layouts/ 布局组件
layouts 目录是 Nuxt 的布局组件目录，用于存放布局组件
├── default.vue
├── marketing.vue
└── saas
├── auth.vue
└── dashboard.vue
default.vue: 默认 layout 组件marketing.vue: 落地页 layout 组件saas/auth.vue: SaaS 认证 layout 组件saas/dashboard.vue: SaaS 后台 layout 组件
modules/ 模块
modules 目录是 Nuxt 的模块目录，用于存放 Nuxt 的不同模块的相关代码，基于modules/目录将应用拆分为不同的模块，便于维护和扩展
├── billing
│ ├── composables
│ ├── providers
│ ├── types
│ └── utils
├── marketing
│ ├── ai
│ ├── blog
│ ├── content
│ ├── home
│ └── shared
├── saas
│ ├── auth
│ ├── dashboard
│ ├── settings
│ └── shared
├── shared
│ ├── components
│ ├── composables
│ └── types
└── ui
├── components
└── lib
pages/ 页面
├── ai
│ └── index.vue
├── auth
│ ├── signin.vue
│ └── signup.vue
├── blog
│ ├── [path].vue
│ └── index.vue
├── changelog
│ └── index.vue
├── dashboard
│ ├── ai
│ ├── demo
│ ├── index.vue
│ └── settings
├── docs
│ └── [...slug].vue
├── index.vue
├── legal
│ ├── privacy.vue
│ └── terms.vue
└── pricing
└── index.vue
public/ 静态资源
public 目录是 Nuxt 的静态资源目录，用于存放静态资源文件
├── favicons
│ ├── android-chrome-512x512.png
│ ├── apple-touch-icon.png
│ └── favicon.ico
└── images
├── google.svg
├── logo.png
└── og-image.png
server/ 服务端
server 目录是 Nuxt 的服务端目录，用于存放服务端代码。Nuxt3 是基于 Nitro 的，所以服务端代码都放在server/目录下
├── api
│ ├── __sitemap__
│ │ └── urls.ts
│ ├── ai
│ │ └── emoji.ts
│ ├── auth
│ │ ├── oauth
│ │ ├── send-phone-code
│ │ ├── signin
│ │ └── signup
│ ├── checkout
│ │ ├── index.ts
│ │ ├── providers
│ │ └── utils
│ └── user
│ └── subscription.ts
├── tsconfig.json
└── utils
├── ai-tools.ts
└── send-webhook.ts
sql/ SQL 文件
sql 目录是 Nuxt 的 SQL 文件目录，用于存放 NuxtBase 初始化时的 SQL 文件
├── ai.sql
├── init.sql
└── register-trigger.sql
stores/ 状态管理
stores 目录是 Nuxt 的状态管理目录，用于存放 Nuxt 的状态管理文件，NuxtBase 使用 Pinia 作为状态管理库
└── user-token.ts