Sapper导出静态应用后客户端路由跳转行为不一致问题求助
问题根因
- Sapper 0.28.x版本的动态路由导出存在已知未修复缺陷,客户端导航逻辑不会优先匹配预生成的静态页面,而是默认触发预加载请求拉取SSR渲染资源,静态导出场景下无对应服务端接口,就会返回500错误渲染
_error.svelte页面。 - 你遇到的偶尔正常的情况是浏览器缓存了直接访问静态页时的资源,跳过了预加载请求导致的,属于偶发的缓存命中现象,不是功能正常。
- 你观察到的类似SSR的实时构建表现,是因为Sapper导出阶段没有把动态路由生成的静态页面路径注册到客户端路由表中,客户端导航时无法匹配到本地静态资源,才会发起服务端请求。
解决方案
- 调整导出命令,手动指定所有动态路由入口:在原有导出命令后添加
--entry参数,明确列出所有动态路由路径,示例:npx sapper export --entry '/ page1 page2',强制Sapper在导出阶段完成全量路由注册。 - 替换静态服务工具:
npx serve的路由匹配规则和Sapper导出结构适配性差,改用Sapper官方推荐的sirv-cli,运行命令为npx sirv __sapper__/export --single,可正常匹配静态路由。 - 优化动态路由页面的preload逻辑:在
[slug].svelte的preload函数中添加环境判断,静态导出场景下直接返回预设数据,不发起网络请求,避免触发服务端资源请求。 - 条件允许的情况下可以将Sapper升级到0.29.3最终稳定版,该版本修复了部分动态路由导出的适配问题,降低偶发错误概率。
内容的提问来源于stack exchange,提问作者se22as
相关产品推荐
相关产品推荐

