当前位置：首页 > news >正文

SvelteKit + Tauri 2 前端配置要点（Static Adapter + SPA 模式最稳）

news 2026/5/11 21:27:07

1、Checklist（理解为什么这样配）

使用adapter-static做SSG/SPA，Tauri 不支持依赖服务端的方案。(Tauri)
如果你开启 prerender（SSG），要注意：构建阶段的load在构建环境执行，拿不到 Tauri API；官方更推荐 SPA（不 prerender）。(Tauri)
frontendDist用build/（SvelteKit static adapter 的默认构建目录）。(Tauri)

2、一步步配置（照抄即可跑）

Step A：安装 static adapter

npminstall--save-dev @sveltejs/adapter-static

(Tauri)

Step B：配置 Tauri（src-tauri/tauri.conf.json）

{"build":{"beforeDevCommand":"npm run dev","beforeBuildCommand":"npm run build","devUrl":"http://localhost:5173","frontendDist":"../build"}}

这里的含义是：tauri dev先跑 SvelteKit dev server，再让窗口加载5173；tauri build先npm run build生成build/，再把它打包进应用。(Tauri)

Step C：配置 SvelteKit（svelte.config.js）

importadapterfrom'@sveltejs/adapter-static';import{vitePreprocess}from'@sveltejs/vite-plugin-svelte';/** @type {import('@sveltejs/kit').Config} */constconfig={preprocess:vitePreprocess(),kit:{adapter:adapter({fallback:'index.html',}),},};exportdefaultconfig;

fallback: 'index.html'是把 SvelteKit 变成“真正 SPA 模式”的关键：当某个 URL 没有对应的预渲染页面时，会回退到index.html，让前端路由接管。(svelte.dev)

Step D：禁用 SSR（src/routes/+layout.ts）

exportconstssr=false;

这样你就能更放心地使用依赖window的 API（包括 Tauri API），减少到处写if (typeof window !== 'undefined')的痛苦。(Tauri)

3、运行与打包

开发：

cargo tauri dev

打包：

cargo tauri build

Tauri 会按tauri.conf.json的before*Command / devUrl / frontendDist自动串起来。(Tauri)

4、关于 prerender（SSG）与 Tauri API：怎么不踩坑

官方提醒的核心点是：如果你启用了 prerender，构建时会执行一些页面加载逻辑；在构建环境里没有 Tauri WebView，自然也就没有 Tauri API。因此更推荐 SPA（不 prerender）。(Tauri)

如果你确实要 “部分 prerender”：

把需要 Tauri API 的逻辑挪到onMount（只在 WebView/浏览器执行）
或者在load中用$app/environment的browser做分支（构建期为 false），避免触发 Tauri 调用
对某些路由单独设置export const prerender = false，让它走纯客户端（具体用法以 SvelteKit page options 为准）(svelte.dev)

一个典型安全写法示例（把 Tauri 调用放到 onMount）：

<script lang="ts"> import { onMount } from 'svelte'; onMount(async () => { // 这里再调用 Tauri API（只在 WebView 环境执行） // const { invoke } = await import('@tauri-apps/api/core'); // const res = await invoke('your_command'); }); </script>

5、最常见问题速查

打包后白屏：90% 是frontendDist指错、或没生成build/。先确认npm run build后确实有build/index.html，再检查frontendDist: "../build"。(Tauri)
刷新路由 404：多半是忘了fallback: 'index.html'，SPA 模式没生效。(svelte.dev)
window is not defined：通常是 SSR 或 prerender 期间执行了依赖 window 的代码；按上面方式禁 SSR、并把 Tauri 调用延后到 onMount/浏览器分支。(svelte.dev)

查看全文

http://www.jsqmd.com/news/414065/