构建为静态 SPA

开发完成后需要把演示文稿部署到服务器或静态托管平台。Slidev 通过 slidev build 将整个项目构建为静态 SPA（单页应用），生成纯 HTML/JS/CSS，可直接部署到任意静态托管。

slidev build 命令

在项目根目录执行：

slidev build

构建产物输出到 dist/ 目录：

dist/
├── index.html        # 入口页
├── assets/           # JS/CSS/图片资源
└── ...               # 其余静态文件

产物特点：

• 纯静态文件，无需 Node 运行时
• 内置打包（基于 Vite），按需分包
• 可直接部署到 GitHub Pages、Netlify、Vercel、Nginx 等任意静态环境

--out 输出目录

默认输出到 dist/，可用 --out 指定其他目录：

slidev build --out build/slides

场景	参数
默认输出	slidev build
指定目录	slidev build --out my-deploy
CI 环境	slidev build --out dist（默认即可）

--base 子路由路径

部署到子路径时（如 https://user.github.io/repo/），需要指定 --base：

slidev build --base /repo/

• 默认 /，适用于根路径部署
• 部署到子目录时必须设置，否则资源 404
• 对应 Vite 的 base 配置

判断是否需要 --base：

部署地址	base 配置
https://example.com/	默认，无需配置
https://example.com/slides/	--base /slides/
https://user.github.io/repo/	--base /repo/

也可以在 Frontmatter 中预设：

---
base: /repo/
---

--without-notes 去除备注

默认构建会包含演讲者备注（数据随包分发）。不需要备注时：

slidev build --without-notes

作用：

• 移除备注相关内容，减小包体积
• 备注只进演讲者模式，公开分享的版本通常不需要
• 生产发布建议加此参数

构建参数速查

参数	说明
--out	输出目录（默认 dist）
--base	部署基础路径（默认 /）
--without-notes	去除演讲者备注
--theme	构建时指定主题
--port	本地预览端口

构建后预览

构建完成后本地验证：

# 方式一：静态服务器
npx serve dist

# 方式二：Slidev 预览构建产物
slidev preview

浏览器打开预览地址，确认资源加载正常、跳转无误。

部署基础

构建出的静态 SPA 可直接复制到目标服务器：

• Nginx：配置站点根目录指向 dist
• 对象存储/OSS：上传后开启静态网站托管
• GitHub Pages / Netlify / Vercel：推送仓库后自动构建部署

静态 SPA 构建是 Slidev 部署链路的基石，产物与平台无关，随处可放。