如何在子文件夹部署SvelteKit静态站点并自动修正资源路径？

不需要手动给每个链接和图片拼接base变量，SvelteKit提供了内置配置和引用方式来自动处理子路径前缀，以下是具体实现步骤：

1. 全局配置 base 路径 #

推荐在svelte.config.js中统一配置base，避免每次构建都手动加命令行参数：

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

export default {
  kit: {
    adapter: adapter(),
    paths: {
      base: '/svelte' // 这里设置你的子路径
    }
  }
};

配置后，开发模式和生产构建都会自动使用这个base路径，开发时访问地址会变为http://localhost:4173/svelte/，和部署环境一致，方便提前验证。

2. 自动处理链接与资源 #

内部路由链接 #

对于指向src/routes下页面的内部链接，直接使用根路径写法即可，SvelteKit会自动为其加上base前缀：

<!-- 无需手动拼接base，构建后会自动转为 /svelte/about -->
<a href="/about">关于页面</a>

如果需要更灵活的控制，也可以导入$app/paths中的base变量显式拼接：

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

<a href="{base}/about">关于页面</a>

静态资源引用 #

• 对于static目录下的资源，使用base变量拼接路径：

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

<img src="{base}/images/logo.png" alt="站点Logo" />

• 更简便的方式是通过模块导入资源，SvelteKit会自动处理路径（包括base前缀）：

<script>
  // 假设图片放在 src/lib/images 目录下
  import logo from '$lib/images/logo.png';
</script>

<img src={logo} alt="站点Logo" />

3. 验证效果 #

配置完成后执行npm run build，查看生成的build目录下的HTML文件，所有内部链接和资源路径都会自动带上/svelte前缀，无需手动修改。

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