使用adapter-static的SvelteKit静态应用部署Vercel后子路由刷新404

问题原因 #

用adapter-static构建的静态SvelteKit应用，Vercel默认会对不存在的静态文件请求返回404，而客户端路由需要所有非静态文件的请求都转发到入口文件，由SvelteKit接管路由解析。你之前的vercel.json配置是React Router的适配方案，不符合SvelteKit静态部署的逻辑。

正确解决方案 #

1. 配置SvelteKit的adapter-static #

修改项目根目录的svelte.config.js，指定fallback为index.html，让静态构建生成支持客户端路由的入口文件：

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			fallback: 'index.html' // 核心配置，启用客户端路由 fallback
		}),
		// 若存在动态路由（如/[slug]），确保prerender配置允许fallback处理
		prerender: {
			entries: ['*']
		}
	}
};

export default config;

2. 配置Vercel的路由规则 #

在项目根目录创建/修改vercel.json，设置正确的路由转发规则：

{
  "routes": [
    { "handle": "filesystem" }, // 优先处理实际存在的静态文件（如CSS、JS、预渲染页面）
    { "src": "/.*", "dest": "/index.html" } // 其余所有请求转发到index.html，由SvelteKit客户端路由处理
  ]
}

3. 重新部署 #

执行npm run build重新构建项目，推送到Vercel完成重新部署。此时直接访问或刷新子路由，就能正常加载对应页面。

额外说明 #

• 如果子路由是可预渲染的静态页面，SvelteKit会在构建时生成对应HTML文件，Vercel会直接返回这些文件，无需fallback处理；
• 带参数的动态路由必须依赖fallback配置，让客户端路由解析URL参数并渲染对应内容。

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