SvelteKit根路由失效但子路由正常——adapter-static与paths.base配置问题

问题详情 #

用SvelteKit开发旅行日志应用，采用adapter-static适配器，设置prerender = true; ssr = false，部署到GitLab Pages后：

• 具体子页面访问正常，资源路径正确指向./_app/...
• 根路由index.html无法加载%sveltekit.head%中的脚本和资源，资源路径出现重复，变成./repo/repo/_app/...

我的配置 #

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: null,
            precompress: false,
            strict: true
        }),
        paths: {
            base: dev ? '' : '/backfuel'
        }
    }
};

export default config;

问题原因 #

根路由预渲染时，相对路径解析逻辑出错：访问根路径/backfuel/时，相对路径./被错误地重复拼接基础路径，导致资源路径变成./backfuel/backfuel/_app/...；而子页面路径为/backfuel/xxx/，相对路径./解析为/backfuel/xxx/，拼接_app/...后路径正确，因此子页面正常。

解决方案 #

1. 给adapter-static添加trailingSlash配置 #

修改适配器配置，强制生成带尾斜杠的路径，确保GitLab Pages解析根路由时路径正确：

adapter: adapter({
    pages: 'build',
    assets: 'build',
    fallback: null,
    precompress: false,
    strict: true,
    trailingSlash: 'always' // 新增该配置项
}),

2. 调整app.html中的资源引用前缀 #

在项目根目录的app.html里，将资源引用的相对路径前缀替换为%sveltekit.base%/，让SvelteKit自动注入正确的基础路径：

<!-- 原引用 -->
<link rel="stylesheet" href="./_app/immutable/assets/0.abc123.css">
<!-- 修改后 -->
<link rel="stylesheet" href="%sveltekit.base%/_app/immutable/assets/0.abc123.css">

<!-- 脚本同理 -->
<script defer src="%sveltekit.base%/_app/immutable/start.def456.js"></script>

3. 核对GitLab Pages部署设置 #

确保GitLab Pages的部署目录设置为build，没有嵌套子目录的配置，避免额外的路径拼接。

内容的提问来源于stack exchange，提问作者dscham