SvelteKit

SvelteKit 是 Svelte 的一个元框架。可以在 https://svelte.nodejs.cn/ 上了解更多关于 SvelteKit 的信息。本指南适用于 SvelteKit 2.20.4 / Svelte 5.25.8。

🌐 SvelteKit is a meta framework for Svelte. Learn more about SvelteKit at https://svelte.nodejs.cn/. This guide is accurate as of SvelteKit 2.20.4 / Svelte 5.25.8.

检查清单

🌐 Checklist

• 通过 static-adapter 使用 SSG 和 SPA。Tauri 不支持基于服务器的解决方案。
• 如果使用带有预渲染的 SSG，请注意在应用构建过程中，load 函数将无法访问 tauri API。建议使用 SPA 模式（无预渲染），因为加载函数只会在具有 tauri API 访问权限的 webview 中运行。
• 在 tauri.conf.json 中将 build/ 用作 frontendDist。

示例配置

🌐 Example Configuration

1. 安装 @sveltejs/adapter-static

   npm

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

   yarn

   yarn add -D @sveltejs/adapter-static

   pnpm

   pnpm add -D @sveltejs/adapter-static

   deno

   deno add -D npm:@sveltejs/adapter-static

2. 更新 Tauri 配置

   npm

   tauri.conf.json

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

   yarn

   tauri.conf.json

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

   pnpm

   tauri.conf.json

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

   deno

   tauri.conf.json

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

3. 更新 SvelteKit 配置：

   svelte.config.js

   import adapter from '@sveltejs/adapter-static';
   import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
   
   /** @type {import('@sveltejs/kit').Config} */
   const config = {
     // Consult https://svelte.nodejs.cn/docs/kit/integrations#preprocessors
     // for more information about preprocessors
     preprocess: vitePreprocess(),
   
     kit: {
       adapter: adapter({
         fallback: 'index.html',
       }),
     },
   };
   
   export default config;

4. 禁用 SSR

   最后，我们需要通过添加一个根 +layout.ts 文件（如果不使用 TypeScript 则为 +layout.js）并包含以下内容来禁用 SSR：

   src/routes/+layout.ts

   export const ssr = false;

   请注意，static-adapter 并不要求你为整个应用禁用 SSR，但它使得可以使用依赖全局 window 对象的 API（例如 Tauri 的 API），而无需客户端检查。

   此外，如果你更喜欢静态站点生成（SSG）而不是单页面应用（SPA）模式，你可以根据适配器文档更改适配器配置和 +layout.ts。