如何在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;

• trailingSlash选项由SvelteKit文档
提到
• 从默认的appDir: '_app'中删除_，因为它可能会因为jekyll而导致问题。如果将一个空的.nojekyll文件添加到项目中(不确定是添加到项目的绝对根目录还是在托管的文件夹中)，则此步骤应该是不必要的。

在构建之后运行preview，一切看起来都很好。但是当打开部署页面时，所有.css和.js文件都有一个404状态。我错过了哪个设置?

Answer 1

由于托管在GitHub页面上的项目将从这样的url提供https://{org}.github.io/{repo}和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模式似乎仍然被打破(或者这是预期的/正常的，服务于本地构建只是不能工作，因为基本路径…?)