Netlify / Vercel 部署

Netlify 与 Vercel 是两大主流静态托管平台，支持连接 Git 仓库后自动构建部署，并免费提供 HTTPS 与自定义域名。Slidev 构建产物是标准静态 SPA，部署体验一致顺滑。

平台能力对比

能力	Netlify	Vercel
连接 Git 自动部署	支持	支持
构建预览	支持（Deploy Previews）	支持（Preview Deployments）
自定义域名	支持 + 免费 HTTPS	支持 + 免费 HTTPS
配置入口	netlify.toml	vercel.json

Netlify 部署

连接仓库

1. 登录 Netlify
2. Add new site → Import an existing project
3. 选择 Git 仓库并授权
4. 配置构建信息后部署

netlify.toml 配置

在项目根目录创建 netlify.toml，声明构建与发布目录：

[build]
  command = "npm run build"
  publish = "dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

配置	说明
build.command	构建命令
build.publish	产物目录（Slidev 默认 dist）
redirects	SPA 回退规则，防止刷新 404

构建命令

根路径部署无需 --base：

{
  "scripts": {
    "build": "slidev build"
  }
}

Vercel 部署

连接仓库

1. 登录 Vercel
2. Add New → Project
3. 导入 Git 仓库，框架预设选 Vite 或自定义
4. 确认构建命令与输出目录后部署

vercel.json 配置

{
  "buildCommand": "slidev build",
  "outputDirectory": "dist",
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

配置	说明
buildCommand	构建命令
outputDirectory	产物目录
rewrites	SPA 路由回退

Vercel 会自动识别 Slidev 的 Vite 构建，多数场景开箱即用。

自动部署流程

连接 Git 后默认自动触发：

事件	行为
推送到主分支	自动构建并发布生产环境
新建 Pull Request	生成预览环境，可在线预览效果
合并 PR	预览环境关闭，生产更新

无需手动操作，团队协作时 PR 预览尤其实用。

域名绑定

两个平台都支持绑定自有域名：

1. 平台控制台 Domains / Settings → Domains
2. 添加域名，按提示配置 DNS：
   • Netlify：CNAME 指向 xxx.netlify.app
   • Vercel：CNAME 指向 xxx.vercel.app（或使用其 nameservers）
3. 等待解析生效，自动签发免费 HTTPS 证书

常见问题

问题	处理
产物 404	检查 SPA 回退配置（redirects/rewrites）
构建失败	确认 package.json 有 build 脚本、依赖安装正常
子路径部署	两平台都提供独立站点根路径，通常无需 --base
字体/图片缺失	确认资源已本地化或可被构建捕获

使用建议

• 个人快速分享：Netlify 拖拽/连接即部署，几分钟上线
• 团队协作：Vercel 的 PR 预览环境适合评审演示稿
• 域名绑定：绑定公司域名，演示地址更专业
• 持续集成：与 GitHub Actions 二选一即可，避免重复构建

Netlify 与 Vercel 把「连接仓库 → 自动构建 → HTTPS + 域名」串成一条完整链路，让 Slidev 演示发布只需一次推代码。