Svelte Kit SSG 在 Github 页面上具有动态路由

Question

以下是我将 Svelte 网站部署到 GitHub Pages 所遵循的步骤：

npm create svelte@latest svelte-test
cd svelte-test
pnpm i
pnpm i -D @sveltejs/adapter-static

然后继续在 static 文件夹中创建一个空的 .nojekyll 文件，并在 src/routes 中创建一个 +layout.ts 文件，其中包含以下内容：

export const prerender = true;

然后我修改了svelte.config.js文件如下：

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

const dev = process.argv.includes('dev');

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: undefined,
            precompress: false,
            strict: true
        }),
        paths: {
            base: dev ? '' : process.env.BASE_PATH,
        }
    }
};

export default config;

最后，我从 Svelte 文档中复制了部署脚本，从 GitHub 操作设置了部署，并且我有了我的静态网站。

现在我想要一个动态路由，根据我数据库上的数据显示不同的内容。

所以我创建了 /[book]/[chapter]/+page.svelte 页面。

只要 Svelte 可以检测到另一个页面中动态页面路由的静态链接（例如

<a href="{base}/fahrenheit-451/1">Fahrenheit 451</a>

），一切都可以正常工作。

但是，如果到该页面的链接是动态的（例如，我从数据库获取数据并基于该数据创建链接），一旦我刷新页面，我就会收到 404 文件未找到错误。

阅读 Svelte 的文档，我找到的唯一解决方案是使用 entries。

缺点是，如果我理解正确的话，如果我的数据库中的数据经常更改，我将在新的和修改的页面上继续遇到相同的问题。

这个问题有更好的解决方案吗还是我被迫使用另一个适配器？

Answer 1

您应该使用适配器的

fallback

选项来实现动态路由；将其设置为

'404.html'

。

如果不存在静态文件，该文件将由 GitHub 页面返回，SvelteKit 将确定路径/参数并加载/执行正确的 JS 代码。