SvelteKit+Vercel路由异常：首次跳转页面白屏且URL带尾斜杠

问题场景 #

基于同一SvelteKit模板克隆的新站点，部署到Vercel后出现异常：首次访问主页正常，点击链接跳转至子页面（如关于页）时显示白屏，URL自动添加尾斜杠（如/about/）；刷新该页面后尾斜杠消失，后续导航恢复正常，而同模板的其他站点无此问题。本地及线上控制台均无报错。

排查与解决方案 #

1. 检查Vercel路由配置 #

Vercel的trailingSlash设置可能覆盖了SvelteKit的默认路由行为。在项目根目录的vercel.json中明确配置：

{
  "trailingSlash": false
}

同时检查文件中是否存在自定义重写规则（如{ "source": "/about", "destination": "/about/" }），这类规则会强制添加尾斜杠，需删除或调整。

2. 核对SvelteKit路由结构与钩子逻辑 #

• 确认src/routes目录结构和正常站点一致，避免出现about文件夹（内含+page.svelte）与about.svelte文件共存的情况，这会导致路由解析冲突。
• 对比正常站点的hooks.server.js、hooks.client.js、+layout.js文件，排查是否有自定义路径处理逻辑（如修改url.pathname添加尾斜杠）。

3. 检查链接组件的路径写法 #

确保跳转使用的是SvelteKit原生<a>标签，且路径未手动添加尾斜杠（即使用<a href="/about">而非<a href="/about/">）。若链接是批量生成的，检查模板中的路径模板字符串是否有误。

可在+layout.svelte中添加代码实时监控路径变化，辅助定位问题：

<script>
  import { page } from '$app/stores';
  $: console.log('当前路径:', $page.url.pathname);
</script>

4. 清理Vercel部署缓存 #

新站点可能残留旧的部署缓存，导致路由规则异常。在Vercel控制台的部署详情页，选择「重新部署」并勾选「清除构建缓存」。

5. 统一SvelteKit适配器版本与配置 #

检查项目的package.json中@sveltejs/adapter-vercel的版本，确保和正常站点一致。同时核对svelte.config.js中的适配器配置，避免开启特殊路由选项：

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

export default {
  kit: {
    adapter: adapter({
      // 移除不必要的自定义路由配置
    })
  }
};

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