使用 Vercel 部署

Vercel 是一个强大的云平台，专为前端和全栈应用程序设计，提供全球内容分发网络 (CDN) 、自动化部署和自定义域名等能力。本指南将帮助您将 IndieShow-Starter-Nuxt 项目部署到 Vercel。

准备工作

在部署前，确保您的项目已经准备就绪：

1. 代码提交到 Git 仓库：确保您的项目代码已经提交到 GitHub、GitLab 或 Bitbucket 仓库
2. 环境变量配置：准备好需要在生产环境中使用的环境变量
3. 项目已完成构建测试：确保项目在本地可以成功构建 (pnpm build)

部署步骤

1. 创建 Vercel 账户

如果您还没有 Vercel 账户，请前往 vercel.com 注册一个新账户。您可以使用 GitHub、GitLab 或 Bitbucket 账户直接登录，这样可以更轻松地导入项目。

2. 导入项目

1. 登录 Vercel 后，点击 Add New... → Project
2. 选择包含 IndieShow-Starter-Nuxt 项目的 Git 仓库
3. Vercel 会自动识别项目为 Nuxt 应用并预先配置大部分设置

3. 配置部署设置

在导入项目页面，您可以配置以下选项：

项目名称

自定义项目在 Vercel 上的名称，该名称会用于生成默认域名（项目名称.vercel.app）。

框架预设

Vercel 应该已自动检测到 Nuxt.js，默认设置通常适用于大多数 Nuxt 项目。

构建和输出设置

默认的构建命令是：

npm run build

如果您使用 pnpm，需要修改为：

pnpm build

环境变量

点击 Environment Variables 展开选项，添加您的环境变量。至少应该添加以下环境变量：

• NUXT_PUBLIC_SITE_URL: 您的生产站点 URL，例如：https://your-project.vercel.app
• NUXT_PUBLIC_SITE_NAME: 您的网站名称
• 其他在 .env.example 文件中列出的必要变量

4. 部署

配置完成后，点击 Deploy 按钮开始部署过程。Vercel 将会：

1. 克隆您的 Git 仓库
2. 安装依赖项
3. 构建项目
4. 部署到全球 CDN

部署完成后，您将收到一个可访问的 URL（如 https://your-project.vercel.app）。

持续部署

Vercel 自动设置 Git 集成，以便在您每次推送更改到主分支时触发新的部署。这意味着：

1. 推送更改到仓库
2. Vercel 自动检测到更改
3. 启动新的构建和部署
4. 更新您的生产站点

预览部署

除了主分支的生产部署外，Vercel 还提供每个 Pull Request 的预览部署。这允许您：

• 在合并到主分支前预览更改
• 分享预览链接以获取反馈
• 确保新更改不会破坏现有功能

自定义域名

要使用自定义域名而不是默认的 .vercel.app 域名，请执行以下步骤：

1. 在 Vercel 仪表板中，选择您的项目
2. 导航到 Settings → Domains
3. 点击 Add 或 Buy 按钮
4. 输入您的域名并按照说明进行域名验证和 DNS 配置

Vercel 提供两种将域名连接到项目的方式：

• 直接添加：通过更改您的域名 DNS 设置
• 使用 Vercel DNS：将域名的 nameservers 指向 Vercel

优化部署（可选）

缓存策略

Vercel 默认为静态资源提供优化的缓存头，但您可以进一步优化：

1. 创建 vercel.json 文件在项目根目录
2. 添加自定义缓存规则：

{
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

环境变量管理

对于不同的部署环境（开发、预览、生产），您可以在 Vercel 仪表板中设置不同的环境变量：

1. 进入项目 Settings → Environment Variables
2. 添加变量并选择应用的环境：Production、Preview 或 Development

常见问题解决

部署失败

如果部署失败，请检查以下几点：

1. 查看构建日志以了解具体错误
2. 确保所有必需的环境变量已设置
3. 验证项目在本地可以成功构建
4. 检查依赖项是否正确安装

路由问题

如果某些路由在本地工作但在 Vercel 上不工作：

1. 确认您的 nuxt.config.ts 中的路由配置正确
2. 使用 vercel.json 文件添加重写规则以处理客户端路由：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

资源链接

• Vercel 部署文档
• Nuxt.js 部署指南
• 环境变量配置

下一步