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

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

npm install --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）

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      fallback: 'index.html',
    }),
  },
};

export default config;

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

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

export const ssr = 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)