SvelteKit

SvelteKit 是 Svelte 的元框架。在 https://sveltekit.dev.org.tw/ 了解更多關於 SvelteKit 的資訊。本指南於 SvelteKit 2.5.7 / Svelte 4.2.15 時為準。

檢查清單

• 透過 static-adapter 使用 SSG 和/或 SPA。Tauri 不支援基於伺服器的解決方案。
• 在 tauri.conf.json 中使用 build/ 作為 frontendDist。

範例設定

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://sveltekit.dev.org.tw/docs/integrations#preprocessors
     // for more information about preprocessors
     preprocess: vitePreprocess(),
   
     kit: {
       adapter: adapter(),
     },
   };
   
   export default config;

4. 停用 SSR

   最後，我們需要停用 SSR 並啟用預先渲染，方法是新增一個根目錄 +layout.ts 檔案 (如果您未使用 TypeScript，則為 +layout.js)，內容如下

   src/routes/+layout.ts

   export const prerender = true;
   export const ssr = false;

   請注意，static-adapter 並不要求您為整個應用程式停用 SSR，但它使您可以使用依賴全域 window 物件的 API (例如 Tauri 的 API)，而無需 用戶端檢查。

   此外，如果您偏好單頁應用程式 (SPA) 模式而非 SSG，您可以根據 adapter 文件 變更 adapter 設定和 +layout.ts。