Skip to main content

静态站点生成

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

¥To use SvelteKit as a static site generator (SSG), use adapter-static.

这会将你的整个站点预渲染为静态文件集合。如果你只想预渲染某些页面并动态服务器渲染其他页面,则需要将不同的适配器与 prerender 选项 一起使用。

¥This will prerender your entire site as a collection of static files. If you’d like to prerender only some pages and dynamically server-render others, you will need to use a different adapter together with the prerender option.

用法(Usage)

¥Usage

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

¥Install with npm i -D @sveltejs/adapter-static, then add the adapter to your svelte.config.js:

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

export default {
	
kit: {
    adapter: any;
}
kit
: {
adapter: anyadapter: import adapteradapter({ // default options are shown. On some platforms // these options are set automatically — see below pages: stringpages: 'build', assets: stringassets: 'build', fallback: undefinedfallback: var undefinedundefined, precompress: booleanprecompress: false, strict: booleanstrict: true }) } };

...并将 prerender 选项添加到你的根布局:

¥...and add the prerender option to your root layout:

src/routes/+layout
// This can be false if you're using a fallback (i.e. SPA mode)
export const const prerender: trueprerender = true;

你必须确保 SvelteKit 的 trailingSlash 选项已根据你的环境进行了适当设置。如果你的主机在收到 /a 请求时不渲染 /a.html,则你需要在根布局中设置 trailingSlash: 'always' 以创建 /a/index.html

¥[!NOTE] You must ensure SvelteKit’s trailingSlash option is set appropriately for your environment. If your host does not render /a.html upon receiving a request for /a then you will need to set trailingSlash: 'always' in your root layout to create /a/index.html instead.

零配置支持(Zero-config support)

¥Zero-config support

有些平台有零配置支持(未来会有更多支持):

¥Some platforms have zero-config support (more to come in future):

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

¥On these platforms, you should omit the adapter options so that adapter-static can provide the optimal configuration:

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

选项(Options)

¥Options

pages

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

¥The directory to write prerendered pages to. It defaults to build.

assets

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

¥The directory to write static assets (the contents of static, plus client-side JS and CSS generated by SvelteKit) to. Ordinarily this should be the same as pages, and it will default to whatever the value of pages is, but in rare circumstances you might need to output pages and assets to separate locations.

fallback

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

¥Specify a fallback page for SPA mode, e.g. index.html or 200.html or 404.html.

precompress

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

¥If true, precompresses files with brotli and gzip. This will generate .br and .gz files.

strict

默认情况下,adapter-static 会检查你的应用的所有页面和端点(如果有)是否已预渲染,或者你是否设置了 fallback 选项。此检查是为了防止你意外发布某些部分无法访问的应用,因为它们不包含在最终输出中。如果你知道这样没问题(例如,当某个页面仅在有条件的情况下存在时),你可以将 strict 设置为 false 以关闭此检查。

¥By default, adapter-static checks that either all pages and endpoints (if any) of your app were prerendered, or you have the fallback option set. This check exists to prevent you from accidentally publishing an app where some parts of it are not accessible, because they are not contained in the final output. If you know this is ok (for example when a certain page only exists conditionally), you can set strict to false to turn off this check.

GitHub 页面(GitHub Pages)

¥GitHub Pages

GitHub 页面 构建时,如果你的存储库名称不等同于 your-username.github.io,请确保更新 config.kit.paths.base 以匹配你的存储库名称。这是因为该站点将从 https://your-username.github.io/your-repo-name 而不是从根目录提供服务。

¥When building for GitHub Pages, if your repo name is not equivalent to your-username.github.io, make sure to update config.kit.paths.base to match your repo name. This is because the site will be served from https://your-username.github.io/your-repo-name rather than from the root.

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

¥You’ll also want to generate a fallback 404.html page to replace the default 404 page shown by GitHub Pages.

GitHub Pages 的配置可能如下所示:

¥A config for GitHub Pages might look like the following:

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 操作在进行更改时自动将你的网站部署到 GitHub Pages。这是一个示例工作流程:

¥You can use GitHub actions to automatically deploy your site to GitHub Pages when you make a change. Here’s an example workflow:

.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

      # 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 干扰。

¥If you’re not using GitHub actions to deploy your site (for example, you’re pushing the built site to its own repo), add an empty .nojekyll file in your static directory to prevent Jekyll from interfering.

上一页 下一页