Skip to main content

静态站点生成

要将 SvelteKit 用作静态站点生成器(SSG),请使用 adapter-static

这将把您的整个站点预渲染为静态文件集合。如果您想只预渲染某些页面而动态渲染其他页面,您需要使用不同的适配器,并结合prerender 选项

使用方法

通过 npm i -D @sveltejs/adapter-static 安装,然后将适配器添加到您的 svelte.config.js 中:

svelte.config
import import adapteradapter from '@sveltejs/adapter-static';

export default {
	
kit: {
    adapter: any;
}
kit
: {
adapter: anyadapter: import adapteradapter({ // 显示默认选项。在某些平台上 // 这些选项会自动设置 — 见下文 pages: stringpages: 'build', assets: stringassets: 'build', fallback: undefinedfallback: var undefinedundefined, precompress: booleanprecompress: false, strict: booleanstrict: true }) } };

...并在根布局中添加 prerender 选项:

src/routes/+layout
// 如果您使用 fallback(即 SPA 模式),这可以设为 false
export const const prerender: trueprerender = true;

您必须确保 SvelteKit 的 trailingSlash 选项适合您的环境。如果您的主机在收到 /a 的请求时不渲染 /a.html,那么您需要在根布局中设置 trailingSlash: 'always' 以创建 /a/index.html

零配置支持

部分平台已支持零配置(未来将支持更多):

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

svelte.config
export default {
	
kit: {
    adapter: any;
}
kit
: {
adapter: anyadapter: adapter({...}) } };

选项

pages

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

assets

写入静态资源(包括 static 的内容,以及 SvelteKit 生成的客户端 JS 和 CSS)的目录。通常这应该与 pages 相同,它会默认使用 pages 的值,但在极少数情况下,您可能需要将页面和资源输出到不同的位置。

fallback

SPA 模式 指定一个后备页面,例如 index.html200.html404.html

precompress

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

strict

默认情况下,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
import import adapteradapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const 
const config: {
    kit: {
        adapter: any;
        paths: {
 base: string | undefined;
        };
    };
}
@type{import('@sveltejs/kit').Config}
config
= {
kit: {
    adapter: any;
    paths: {
        base: string | undefined;
    };
}
kit
: {
adapter: anyadapter: import adapteradapter({ fallback: stringfallback: '404.html' }),
paths: {
    base: string | undefined;
}
paths
: {
base: string | undefinedbase: var process: NodeJS.Processprocess.NodeJS.Process.argv: string[]

The process.argv property returns an array containing the command-line arguments passed when the Node.js process was launched. The first element will be {@link execPath } . See process.argv0 if access to the original value of argv[0] is needed. The second element will be the path to the JavaScript file being executed. The remaining elements will be any additional command-line arguments.

For example, assuming the following script for process-args.js:

import { argv } from 'node:process';

// print process.argv
argv.forEach((val, index) => {
  console.log(`${index}: ${val}`);
});

Launching the Node.js process as:

node process-args.js one two=three four

Would generate the output:

0: /usr/local/bin/node
1: /Users/mjr/work/node/process-args.js
2: one
3: two=three
4: four
@sincev0.1.27
argv
.Array<string>.includes(searchElement: string, fromIndex?: number): boolean

Determines whether an array includes a certain element, returning true or false as appropriate.

@paramsearchElement The element to search for.
@paramfromIndex The position in this array at which to begin searching for searchElement.
includes
('dev') ? '' : var process: NodeJS.Processprocess.NodeJS.Process.env: NodeJS.ProcessEnv

The process.env property returns an object containing the user environment. See environ(7).

An example of this object looks like:

{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'maciej',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/maciej',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/maciej',
  LOGNAME: 'maciej',
  _: '/usr/local/bin/node'
}

It is possible to modify this object, but such modifications will not be reflected outside the Node.js process, or (unless explicitly requested) to other Worker threads. In other words, the following example would not work:

node -e 'process.env.foo = "bar"' &#x26;#x26;&#x26;#x26; echo $foo

While the following will:

import { env } from 'node:process';

env.foo = 'bar';
console.log(env.foo);

Assigning a property on process.env will implicitly convert the value to a string. This behavior is deprecated. Future versions of Node.js may throw an error when the value is not a string, number, or boolean.

import { env } from 'node:process';

env.test = null;
console.log(env.test);
// => 'null'
env.test = undefined;
console.log(env.test);
// => 'undefined'

Use delete to delete a property from process.env.

import { env } from 'node:process';

env.TEST = 1;
delete env.TEST;
console.log(env.TEST);
// => undefined

On Windows operating systems, environment variables are case-insensitive.

import { env } from 'node:process';

env.TEST = 1;
console.log(env.test);
// => 1

Unless explicitly specified when creating a Worker instance, each Worker thread has its own copy of process.env, based on its parent thread’s process.env, or whatever was specified as the env option to the Worker constructor. Changes to process.env will not be visible across Worker threads, and only the main thread can make changes that are visible to the operating system or to native add-ons. On Windows, a copy of process.env on a Worker instance operates in a case-sensitive manner unlike the main thread.

@sincev0.1.27
env
.string | undefinedBASE_PATH
} } }; export default
const config: {
    kit: {
        adapter: any;
        paths: {
 base: string | undefined;
        };
    };
}
@type{import('@sveltejs/kit').Config}
config
;

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

.github/workflows/deploy
name: Deploy to GitHub Pages

on:
  push:
    branches: 'main'

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

      # 如果您使用 pnpm,添加此步骤然后更改下面的命令和缓存键以使用 `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:
 # 这应该与适配器静态选项中的 `pages` 选项匹配
 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 actions 部署您的站点(例如,您将构建的站点推送到它自己的仓库),请在您的 static 目录中添加一个空的 .nojekyll 文件,以防止 Jekyll 干扰。

在 GitHub 编辑此页面

上一页 下一页