如何让我的 SvelteKit API 在生产中工作（Github 页）？

Question

背景

我已将我的项目部署到此处的 Github 页面：https://zeddrix.github.io/jw-guitar-tabs，因此我的 svelte.config.js 文件中有此内容：

kit: {
    ...
    paths: {
        base: '/jw-guitar-tabs'
    },
    appDir: 'internal',
    ...
}

我的 __layout.svelte:

<script lang="ts">
    import { base } from '$app/paths';
    ...
    const fetchFromDBAndStore = async (category: SongCategoriesType) => {
        const res = await fetch(`${base}/api/categories/original-songs`);
        const data = await res.json();
        console.log(data);

    ...other code...
    };

    ...I have my code here that uses this data...
</script>

<Layout><slot /></Layout>

旁注： 我把它放在这个文件中，这样 运行 就可以出现在任何页面上，但我有一个代码来确保这不会运行 如果我已经有了数据。 这不是问题。

这调用文件：src/routes/api/categories/original-songs.ts:

import fetchSongsDB from '$utils/fetchSongsDB';

export const get = async () => fetchSongsDB('originals');

这个 fetchSongsDB 函数从我的数据库中获取歌曲。

当我 运行 npm run dev 在 开发模式 甚至在 预览模式 时一切正常我运行npm run previewbuild之后，当然是在localhost:3000/jw-guitar-tabs.

问题

但是，在 https://zeddrix.github.io/jw-guitar-tabs 的静态 github 页面上，我得到了这个：

它服务于 404 Github 页面作为响应。我猜是因为它找不到 src/routes/api/categories/original-songs.ts 文件。但是当然 Github 不会找到这个文件，因为部署到 gh-pages 的文件夹是构建文件夹所以我没有这个原始的 file路线了。

我该如何解决这个问题？

Answer 1

1. 将 original-songs.ts 重命名为 original-songs.json.ts
2. 改变

fetch(`${base}/api/categories/original-songs`);

到

fetch(`${base}/api/categories/original-songs.json`);

这允许 adapter-static 在构建时 生成 json 文件。
（这些是静态文件，要查看 mongodb 中所做的更改将需要重建并重新部署到 GitHub 页面）

3. 有时静态适配器不会自动检测端点。
   您可以通过在 svelte.config.js
中指定 url 来帮助适配器

  kit: {
    prerender: {
      entries: [
        "*",
        "/api/categories/original-songs.json",

4. 额外提示：刷新页面时 /favorites url 重定向到 /favorites/，将 trailingSlash: "never", 添加到工具包以生成 favorites.html 而不是 favorites/index.html 并保持 /favorites url 刷新。