SvelteKit动态路由页面刷新报404错误咨询（Firebase部署场景）

步骤1：修改SvelteKit静态适配器配置 #

你当前svelte.config.js中的fallback参数设为了null，不会生成SPA兜底页面，动态路径请求无法被静态托管正确响应，修改配置如下：

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

export default {
    kit: {
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: '200.html' // 替换原有null值，生成SPA兜底页面
        }),
    }
};

fallback参数会让构建工具生成一个统一的兜底HTML文件，所有未匹配到静态资源的请求都会返回该文件，由客户端SvelteKit路由接管处理动态内容。

步骤2：配置Firebase Hosting重写规则 #

在项目根目录的firebase.json文件中，修改hosting配置段，添加全局重写规则，将所有路径请求指向我们生成的兜底页面：

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

如果你将fallback设置为index.html，把上述destination改为/index.html即可。

步骤3：调整页面配置并重新部署 #

你当前[id].svelte中设置了export const hydrate = false，该配置会关闭客户端注水，导致页面加载后客户端无法接管路由处理动态内容，需要删除该行配置。

完成所有配置修改后，重新执行构建和部署命令即可生效：

npm run build
firebase deploy

可选优化 #

如果你需要兼顾SEO需求，不想使用纯SPA兜底方案，可以更换为@sveltejs/adapter-firebase适配器，搭配Firebase Functions实现服务端渲染，动态生成页面内容。

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