静态部署

构建单页应用（SPA）

你还可以将幻灯片构建成可部署的单页应用（SPA）：

$ slidev build

生成的应用程序会保存在 dist/ 目录下，然后你可以将该目录部署在 GitHub Pages，Netlify，Vercel，等你想部署的任何地方。接着，就可以将你幻灯片的链接分享给任何人。

You can test the generated build using a web server (Apache, NGINX, Caddy...etc.) or in the project you can directly run: npx vite preview.

配置基础路径

如果你需要将幻灯片部署在网站的子路由下，你可以使用 --base 选项来进行修改。The --base path must begin and end with a slash /; for example:

$ slidev build --base /talks/my-cool-talk/

欲了解更多，请参阅 Vite 的文档。

提供可下载的 PDF

你可以向浏览幻灯片单页应用的观众提供一个可下载的 PDF。你可以通过如下配置来启用它：

---
download: true
---

配置好后，Slidev 将生成一个 PDF 文件，并在单页应用中展示下载按钮。

你也可以为 PDF 提供一个自定义的 URL。在这种情况下，PDF 的渲染过程将被忽略。

---
download: 'https://myside.com/my-talk.pdf'
---

This can also be done with the CLI option --download (boolean only).

$ slidev build --download

When using the download option, you can also provide the export options:

• By using CLI export options
• Or frontmatter export options

Output directory

You can change the output directory using --out.

$ slidev build --out my-build-folder

Watch mode

By passing the --watch option the build will run in watch mode and will rebuild anytime the source changes.

$ slidev build --watch

Multiple entries

You can also build multiple slides at once.

$ slidev build slides1.md slides1.md

Or

$ slidev build *.md

In this case, each input file will generate a folder containing the build in the output directory.

示例

下面是几个导出为单页应用的示例：

• Starter Template
• Composable Vue by Anthony Fu

欲了解更多，请参阅 Showcases。

部署

我们建议使用 npm init slidev@latest 来为你初始化你的项目，它包含了部署服务开箱即用的配置文件。

Netlify

• Netlify

在你项目的根目录创建 netlify.toml 文件，其内容如下：

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

[build.environment]
NODE_VERSION = '20'

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

接着，去 Netlify 的仪表盘，选择对应仓库并创建新的站点。

Vercel

• Vercel

在你项目的根目录创建 vercel.json 文件，其内容如下：

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

接着，去 Vercel 的仪表盘，选择对应仓库并创建新的站点。

GitHub Pages

• GitHub Pages

将你的幻灯片部署到 GitHub Pages：

• 上传你的仓库里该项目的全部文件（例如，名字为 name_of_repo）
• 创建 .github/workflows/deploy.yml 文件，并包含如下内容。然后通过 Github Action 将你的幻灯片部署到 Github Pages。在该文件中，用 name_of_repo 替换 <name_of_repo>。

name: Deploy pages

on:
  workflow_dispatch: {}
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    permissions:
      contents: read
      pages: write
      id-token: write

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'

      - name: Install dependencies
        run: npm install

      - name: Build
        run: npm run build -- --base /<name_of_repo>/

      - uses: actions/configure-pages@v4

      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

• 在你的仓库里，选择 “Settings > Pages”。在 “Build and deployment” 下，选择 “Deploy from a branch”，选择 “gh-pages” 和 “root”，点击保存。
• 最终，在全部工作流执行之后，在 “Settings > Pages” 下会出现幻灯片的链接。