10 SvelteKit
原文链接: https://tauri.app/start/frontend/sveltekit/
SvelteKit 是 Svelte 的元框架。你可以在 https://svelte.dev/ 进一步了解 SvelteKit。本指南基于 SvelteKit 2.20.4 / Svelte 5.25.8。
检查清单
- 通过
static-adapter 使用 SSG 和 SPA。Tauri 不支持基于服务器的方案。 - 如果使用带预渲染的 SSG，请注意在应用的构建过程中
load 函数无法访问 tauri API。推荐使用 SPA 模式（不带预渲染），这样 load 函数只会在 webview 中运行，并能访问 tauri API。 - 在
tauri.conf.json 中使用 build/ 作为 frontendDist。
示例配置
- 安装
@sveltejs/adapter-static
包管理器
1
| npm install --save-dev @sveltejs/adapter-static
|
1
| yarn add -D @sveltejs/adapter-static
|
1
| pnpm add -D @sveltejs/adapter-static
|
1
| deno add -D npm:@sveltejs/adapter-static
|
2. 更新 Tauri 配置
包管理器
1
2
3
4
5
6
7
8
| {
"build": {
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
|
1
2
3
4
5
6
7
8
| {
"build": {
"beforeDevCommand": "yarn dev",
"beforeBuildCommand": "yarn build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
|
1
2
3
4
5
6
7
8
| {
"build": {
"beforeDevCommand": "pnpm dev",
"beforeBuildCommand": "pnpm build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
|
1
2
3
4
5
6
7
8
| {
"build": {
"beforeDevCommand": "deno task dev",
"beforeBuildCommand": "deno task build",
"devUrl": "http://localhost:5173",
"frontendDist": "../build"
}
}
|
3. 更新 SvelteKit 配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// 预处理器的更多信息见
// https://svelte.dev/docs/kit/integrations#preprocessors
preprocess: vitePreprocess(),
kit: {
adapter: adapter({
fallback: 'index.html',
}),
},
};
export default config;
|
禁用 SSR
最后，我们需要通过添加一个根级 +layout.ts 文件（如果不使用 TypeScript，则为 +layout.js）来禁用 SSR，内容如下：
1
2
| // src/routes/+layout.ts
export const ssr = false;
|
注意，static-adapter 并不要求你为整个应用禁用 SSR，但这样做可以让你使用依赖全局 window 对象的 API（例如 Tauri 的 API），而无需客户端检查。
此外，如果你更偏好静态站点生成（SSG）而不是单页应用（SPA）模式，可以按照适配器文档修改适配器配置和 +layout.ts。