SvelteKit动态路由([...slug])部署Firebase后返回404错误

问题原因 #

你使用@sveltejs/adapter-static适配器时，当前配置将fallback设为null且开启默认预渲染。动态路由无法被预渲染为静态文件，直接访问或刷新动态路由时，Firebase Hosting找不到对应静态资源会返回404；而从首页点击跳转是客户端路由在处理，因此能正常访问。

修复步骤 #

1. 修改Svelte配置文件 #

更新svelte.config.js中的适配器配置，将fallback设置为index.html，让静态适配器生成 fallback 文件，用于客户端路由接管动态路径请求：

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

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        preprocess({
          postcss: true,
          preserve: ['ld+json'],
        }),
      ],

    kit: {
        adapter: adapter({
            pages: 'public',
            assets: 'public',
            fallback: 'index.html', // 修改此处
            precompress: false
            }),
            prerender: {
            default: true
            }
    }
};

export default config;

2. 配置Firebase Hosting重写规则 #

在项目根目录的firebase.json中添加重写规则，将所有请求指向index.html，确保Firebase Hosting把所有路由请求交给Svelte客户端路由处理：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

3. 重新构建并部署 #

执行构建命令生成新的静态文件，再部署到Firebase：

npm run build
firebase deploy --only hosting

完成以上操作后，刷新动态路由或直接访问对应URL时，Firebase会将请求转发到index.html，由Svelte客户端路由处理路径，即可解决404问题。

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