集成 Svelte / SvelteKit

Svelte 是一个「编译时」前端框架，它在构建阶段就把组件编译成高效的原生 JS，运行时几乎不背包袱；SvelteKit 则是它的「全家桶」元框架（meta-framework），自带路由、渲染策略等能力。两者都能和 Tauri 配合，但配置上有一点关键差异：SvelteKit 默认偏向服务端渲染（SSR，Server-Side Rendering），而 Tauri 是一个「静态 Web 宿主」，不支持服务端方案。本章只讲集成机制，不带着做一个完整产品。

两种模板：Svelte 与 SvelteKit

Tauri 脚手架 create-tauri-app 同时提供 Svelte 和 SvelteKit 两个模板。简单说：

• Svelte 模板：就是一个纯前端单页应用（SPA，Single-Page Application），用 Vite 构建，结构最接近前面讲过的 React/Vue 模板，配置也基本一致（端口锁死、对齐 devUrl）。
• SvelteKit 模板：功能更全，但因为它默认带 SSR，需要额外两步改造才能跑在 Tauri 里。

如果你的应用不复杂，直接用 Svelte 模板最省心，配置方式和第 17 章 React 几乎一样。如果你需要 SvelteKit 的路由和文件约定，就走下面的 SvelteKit 配置流程。

SvelteKit 的核心约束：用 SSG 或 SPA，禁用 SSR

Tauri 在概念上是一个静态 Web 宿主（static web host）：它把你构建出来的 HTML/CSS/JS/WASM 加载到 WebView 里运行，没有背后的 Node 服务器。因此官方给出一条硬性清单（checklist）：

• 用静态站点生成（SSG，Static Site Generation）、单页应用（SPA）或经典多页应用（MPA）。
• 不要用依赖服务器的方案（如 SSR）。

对 SvelteKit 来说，最稳的做法是借助 @sveltejs/adapter-static 适配器，把应用输出成纯静态文件。官方推荐使用 SPA 模式（不预渲染），因为 SPA 下 load 函数只在 WebView 里运行，那时才访问得到 Tauri 的 API；而 SSG 预渲染会在构建阶段执行 load，那时没有浏览器环境，调 Tauri API 会失败。

配置 SvelteKit 的适配器和 tauri.conf.json

第一步，安装静态适配器：

npm install --save-dev @sveltejs/adapter-static

第二步，在 svelte.config.js 里把适配器换成 adapter-static，并给出 SPA 回退页：

// svelte.config.js
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

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

export default config;

第三步，禁用整站 SSR，在 src/routes/+layout.ts（不用 TypeScript 就写 +layout.js）里加一行：

// src/routes/+layout.ts
export const ssr = false;

禁用 SSR 后，所有依赖 window、document 的客户端库（包括 Tauri 的 API）都能直接用了，不必再写客户端判断。

第四步，把 tauri.conf.json 的 build 配置对齐。注意 SvelteKit 用适配器静态输出后产物在 build/ 目录，不是 Vite 默认的 dist/：

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

在 Svelte 组件里调用 Tauri API

集成机制讲完，调用方式和其它框架完全一样：从 @tauri-apps/api/core 引入 invoke。下面用 Svelte 的 <script> 语法演示：

<!-- src/App.svelte -->
<script lang="ts">
  import { invoke } from '@tauri-apps/api/core';
  import { ref } from 'svelte';

  let name = '';
  let reply = '';

  async function greet() {
    reply = await invoke('greet', { name });
  }
</script>

<main>
  <h1>Svelte + Tauri</h1>
  <input bind:value={name} placeholder="输入你的名字" />
  <button on:click={greet}>打招呼</button>
  <p>{reply}</p>
</main>

invoke 返回 Promise，用 await 取值后赋给变量，Svelte 的响应式会自动更新界面。SvelteKit 下的写法相同，只是组件通常放在 src/routes/ 里。

SPA 与 SSG：到底选哪个

前面提到 SvelteKit 推荐走 SPA，这里把两种模式的取舍讲清楚，方便你按需求决定。

• SPA 模式：ssr = false 加上 adapter-static 的 fallback: 'index.html'。所有页面都在浏览器（WebView）里动态渲染，load 函数只在客户端执行，因此随时能调用 Tauri API。配置最简单，新手首选。
• SSG 模式：在构建阶段把每个路由预渲染成静态 HTML。优点是首屏快、SEO 友好；缺点是你不能在预渲染阶段的 load 里访问 Tauri API（那时没有浏览器环境），只能把依赖 Tauri 的逻辑挪到 onMount 等客户端生命周期里。

一句话：想少踩坑、功能重度依赖原生能力，用 SPA；只做内容展示、且能避开「预渲染期调 Tauri」的坑，再考虑 SSG。

不止 invoke：其它 API 模块

和 React/Vue 一样，@tauri-apps/api 的其它模块也可以直接 import。例如操作窗口：

import { getCurrentWindow } from '@tauri-apps/api/window';
await getCurrentWindow().hide();

再比如收发事件：

import { listen } from '@tauri-apps/api/event';
await listen('progress', (event) => console.log(event.payload));

启动与构建命令

配置好之后，开发用 npm run tauri dev（它会先跑 beforeDevCommand 起 Vite，再编译 Rust 并打开窗口），发布用 npm run tauri build。你会发现构建产物里多了一个 build/ 目录——那就是 SvelteKit 经 adapter-static 产出的静态文件，Tauri 会把它嵌进安装包。

小结

Svelte/SvelteKit 与 Tauri 的集成要点有三：其一，纯 Svelte 模板配置和 React/Vue 一致；其二，SvelteKit 必须改用 adapter-static 走 SSG/SPA，并在 +layout.ts 里 ssr = false，产物目录是 build/；其三，在组件里统一用 import { invoke } from '@tauri-apps/api/core' 调用 Rust。底层机制始终不变，变的只是构建产物放哪里、以及要不要关掉 SSR。