如何在 GitHub 页面上托管 SvelteKit（适配器静态）项目？

Question

我想在 GitHub 页面上托管一个 SvelteKit 项目，但显然我还没有找到正确的设置。我试过

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: null,
            precompress: false
        }),
        appDir: 'app',
        prerender: {
            default: true,
        },
        trailingSlash: 'always',
    }
};

export default config;

• trailingSlashSvelteKit 文档提到了该选项
• _从默认值中删除appDir: '_app'，因为有人提到它可能会因为 jekyll 而导致问题。.nojekyll如果将空文件添加到项目中（不确定是否添加到项目的绝对根目录或托管的文件夹中），则此步骤应该是不必要的，无论哪种方式我都没有看到任何区别

构建后运行时，preview一切看起来都很好。但是，当打开已部署的页面时，所有文件.css和.js文件都有404状态。我缺少哪个设置？

Answer 1

由于 GitHub 页面上托管的项目将通过这样的 url 提供服务，因此必须添加https://{org}.github.io/{repo}a和这样的配置base path

const config = {
    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: null,
            precompress: false
        }),
        prerender: {
            default: true,
        },
        trailingSlash: 'always',
        paths: {
            base: '/repo_name'
        }
    }
};

.nojekyll再加上托管目录中的空文件应该可以工作。

不幸的是，目前似乎存在一些问题base path

• https://github.com/sveltejs/kit/issues/2958
• https://github.com/sveltejs/kit/issues/3752
• https://github.com/sveltejs/kit/issues/4528

首先是在运行dev模式下，所以只在像这样构建时设置基本路径

const dev = process.env.NODE_ENV === 'development';

const config = {
    kit: {
        ...
        paths: {
            base: dev ? '' : '/repo_name',
        }
    }
};

对于构建时的错误，有一个链接的解决方法

<script>
import { base } from '$app/paths';
</script>

<a href="{base}/route">Route</a>

通过这些调整dev，build模式应该可以在 GitHub 页面上运行和托管。preview模式似乎仍然被破坏（或者这是预期的/正常的，因为基本路径而无法在本地提供构建服务......？）