SvelteKit静态站点适配器：页面刷新后返回404错误

问题分析 #

你当前的情况是：用@sveltejs/adapter-static构建的静态站点，客户端路由跳转/secondpage正常，但直接输入该URL或刷新时返回404。核心原因是静态服务器只会匹配实际存在的文件路径——服务器收到/secondpage请求时，会尝试找secondpage文件或secondpage/index.html，但你的构建产物是secondpage.html，自然匹配不到，导致404。

解决方案 #

1. 调整adapter配置，启用SPA fallback #

修改svelte.config.js中的adapter配置，将fallback设为index.html，让服务器在找不到文件时返回主页面，由SvelteKit客户端路由接管处理：

kit: {
    adapter: adapter({
        pages: "build",
        assets: "build",
        fallback: "index.html", // 关键修改
        precompress: false,
        trailingSlash: 'always',
    }),
}

2. 确保trailingSlash配置生效 #

你已经设置了trailingSlash: 'always'，但构建产物仍为secondpage.html而非secondpage/index.html，可以排查以下几点：

• 清理旧的build目录后重新构建，避免缓存影响
• 检查是否有其他配置（如环境变量、kit.paths）覆盖了trailingSlash设置
• 确认页面已被预渲染：在svelte.config.js中保证prerender.enabled为true（默认开启），或在页面组件中添加export const prerender = true

3. 配置服务器重写规则（必须步骤） #

仅修改SvelteKit配置还不够，需要让静态服务器将所有路由请求指向对应的HTML文件或fallback页面，以下是常见服务器的配置示例：

• Nginx：在站点配置的location /块中添加：

  try_files $uri $uri/ $uri.html /index.html;
  

• Apache：在站点根目录创建.htaccess文件，添加：

  RewriteEngine On
  # 匹配非文件和非目录的请求，重写到对应html文件
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ $1.html [L]
  # 如果仍找不到，重写到fallback
  RewriteRule ^ /index.html [L]
  

• 静态托管平台（如Netlify/Vercel）：
  • Netlify：在项目根目录创建netlify.toml，添加：

    [[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200
    

  • Vercel：在vercel.json中添加：

    {
      "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
    }
    

验证 #

修改配置后，重新执行构建命令，检查build目录是否生成secondpage/index.html（当trailingSlash: 'always'时），同时配置服务器重写规则，此时直接访问/secondpage或刷新页面就能正常加载了。

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