构建并部署

静态网站生成

要将 SvelteKit 用作静态网站生成器 (SSG)，请使用 adapter-static。

这会将你的整个网站预渲染为一组静态文件。如果你只想预渲染部分页面，而动态地服务器渲染其他页面，则需要将不同的适配器与 prerender 选项一起使用。

用法永久链接

使用 npm i -D @sveltejs/adapter-static 安装，然后将适配器添加到你的 svelte.config.js

svelte.config.js

ts
import adapter from '@sveltejs/adapter-static';
Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.
export default {
	kit: {
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			fallback: undefined,
			precompress: false,
			strict: true
		})
	}
};

...并向你的根布局添加 prerender 选项

src/routes/+layout.js

ts
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true;

src/routes/+layout.ts

ts
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true;

你必须确保 SvelteKit 的 trailingSlash 选项针对你的环境设置得当。如果你的主机在收到对 /a 的请求后未渲染 /a.html，那么你需要在你的根布局中将 trailingSlash: 'always' 设置为创建 /a/index.html。

零配置支持永久链接

一些平台具有零配置支持（未来还会有更多）

Vercel

在这些平台上，你应省略适配器选项，以便 adapter-static 可以提供最佳配置

svelte.config.js

export default {
	kit: {
		adapter: adapter({...})
		adapter: adapter()
	}
};

选项永久链接

页面永久链接

用于写入预渲染页面的目录。它默认为 build。

资产永久链接

用于写入静态资产（static 的内容，以及 SvelteKit 生成的客户端 JS 和 CSS）的目录。通常这应与 pages 相同，并且它将默认为 pages 的值，但在极少数情况下，你可能需要将页面和资产输出到不同的位置。

回退永久链接

为 SPA 模式指定一个回退页面，例如 index.html 或 200.html 或 404.html。

预压缩永久链接

如果为 true，则使用 brotli 和 gzip 预压缩文件。这会生成 .br 和 .gz 文件。

严格永久链接

默认情况下，adapter-static 会检查应用的所有页面和端点（如果有）是否都已预渲染，或者你已设置了 fallback 选项。此检查的存在是为了防止你意外发布一个部分内容不可访问的应用，因为这些内容未包含在最终输出中。如果你知道这是可以接受的（例如，当某个页面仅在特定条件下存在时），你可以将 strict 设置为 false 以关闭此检查。

GitHub Pages永久链接

为 GitHub Pages 构建时，如果你的仓库名称不等于 your-username.github.io，请务必更新 config.kit.paths.base 以匹配你的仓库名称。这是因为该网站将从 https://your-username.github.io/your-repo-name 提供服务，而不是从根目录提供服务。

你还需要生成一个后备 404.html 页面，以替换 GitHub Pages 显示的默认 404 页面。

GitHub Pages 的配置可能如下所示

svelte.config.js

ts
import adapter from '@sveltejs/adapter-static';
Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.
/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			fallback: '404.html'
		}),
		paths: {
			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'.
  Type 'string' is not assignable to type '"" | `/${string}` | undefined'.2322Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'.
  Type 'string' is not assignable to type '"" | `/${string}` | undefined'.		}
	}
};

export default config;

你可以使用 GitHub 动作在你进行更改时自动将你的网站部署到 GitHub Pages。以下是一个示例工作流

.github/workflows/deploy.yml

yaml
name: Deploy to GitHub Pages

on:
  push:
    branches: 'main'

jobs:
  build_site:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      # If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
      # - name: Install pnpm
      #   uses: pnpm/action-setup@v3
      #   with:
      #     version: 8

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install dependencies
        run: npm install

      - name: build
        env:
          BASE_PATH: '/${{ github.event.repository.name }}'
        run: |
          npm run build

      - name: Upload Artifacts
        uses: actions/upload-pages-artifact@v3
        with:
          # this should match the `pages` option in your adapter-static options
          path: 'build/'

  deploy:
    needs: build_site
    runs-on: ubuntu-latest

    permissions:
      pages: write
      id-token: write

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

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

如果你不使用 GitHub 动作来部署你的网站（例如，你将构建的网站推送到其自己的仓库），请在你的 static 目录中添加一个空 .nojekyll 文件，以防止 Jekyll 干扰。

上一个 Node 服务器

下一个单页面应用