SvelteKit使用adapter-static部署到服务器后路由跳转异常问题

两个配置错误共同导致客户端路由失效：

• adapter-static的fallback参数设为null，没有生成SPA模式所需的统一路由入口
• Gin后端静态路由配置不全，兜底逻辑没有正确过滤静态资源、接口请求，且静态资源托管覆盖不全
  本地npm run preview运行正常是因为preview服务内置了完整的SPA fallback规则，不需要手动配置。

1. 修改SvelteKit配置 #

打开svelte.config.js，调整adapter-static的fallback参数，开启SPA客户端路由支持：

const config = {
  kit: {
    adapter: adapter({
      pages: '../backend/build',
      assets: '../backend/build',
      fallback: 'index.html', // 从null改为'index.html'
      precompress: false,
    }),
    // 其余原有配置保持不变
    alias: {},
    appDir: '_app',
    browser: {
      hydrate: true,
      router: true,
    },
    files: {
      assets: 'static',
      hooks: 'src/hooks',
      lib: 'src/lib',
      params: 'src/params',
      routes: 'src/routes',
      serviceWorker: 'src/service-worker',
      template: 'src/app.html',
    },
    floc: false,
    methodOverride: {
      parameter: '_method',
      allowed: [],
    },
    paths: {
      assets: '',
      base: '',
    },
    trailingSlash: 'always',
    vite: {
      server: {
        proxy: {
          '/api': 'http://localhost:5555',
        },
      },
    },
  },
  preprocess: null,
};

修改完成后重新执行构建命令生成新的产物：

npm run build

2. 修正Gin静态托管逻辑 #

原配置只托管了根路径和_app目录，既没有覆盖static目录导出的其他根路径静态资源，兜底逻辑也没有过滤接口和静态资源请求，会导致js/css请求错误返回html，路由无法正常初始化。
替换为以下配置，注意静态资源路由必须放在NoRoute兜底逻辑之前：

package main

import (
  "net/http"
  "path/filepath"
  "strings"

  "github.com/gin-gonic/gin"
)

func main() {
  router := gin.Default()

  // 托管SvelteKit编译产出的_app资源目录（js/css/字体等框架资源）
  router.StaticFS("/_app", http.Dir("build/_app"))
  // 托管根目录下所有静态资源（favicon、static目录存放的图片/文件等）
  router.Static("/", http.Dir("build"))

  // 兜底路由：所有非静态资源、非接口请求返回index.html，交给SvelteKit客户端路由接管
  router.NoRoute(func(c *gin.Context) {
    requestPath := c.Request.URL.Path

    // 放行/api开头的后端接口请求，返回404而不是html
    if strings.HasPrefix(requestPath, "/api") {
      c.AbortWithStatus(http.StatusNotFound)
      return
    }

    // 放行带后缀的静态资源请求，避免css/js/图片等请求被错误拦截返回html
    if fileExt := filepath.Ext(requestPath); fileExt != "" {
      c.AbortWithStatus(http.StatusNotFound)
      return
    }

    c.File("./build/index.html")
  })

  router.Run(":8080")
}

如果项目是纯单页应用、不需要预渲染任何路由，可以在src/routes/+layout.js（TS项目用+layout.ts）中添加以下配置，减少构建产物体积：

export const prerender = false;

内容的提问来源于stack exchange，提问作者sandeep.kgp