使用其他前端框架

Wails 刻意只為少數幾種框架內建入門範本：

但這不代表您只能選擇這些框架。Wails 應用程式的前端就只是一個 Web 專案——任何能建置為靜態 HTML/CSS/JS 的框架都能使用。如果您選擇的框架（Solid、Preact、Lit、Qwik、SvelteKit、Angular……）沒有範本，只要幾分鐘就能自行建立初始專案。

frontend/目錄的用途

Wails 不在意frontend/中使用哪一種框架。它只依賴一組精簡且與框架無關的約定：

• frontend/dist/是最終隨應用程式發布的內容。main.go會使用//go:embed all:frontend/dist嵌入建置完成的前端，並由資產伺服器提供。您的建置必須將靜態套件輸出至frontend/dist/（Vite 的預設輸出目錄）。

• 建置由frontend/package.json驅動。執行wails3 build時，Wails 會執行前端的build指令碼；執行wails3 dev時，則會執行dev並代理 Vite 開發伺服器，以進行熱重新載入。

• 繫結會產生至frontend/bindings/。Wails 會檢查您註冊的 Go 服務，並在該處寫入型別安全的 SDK。您可以像匯入其他模組一樣匯入它：

  jsCopy code

  import { GreetService } from "./bindings/changeme";

• 開發伺服器在固定連接埠上執行。wails3 dev會在WAILS_VITE_PORT所指定的連接埠（預設為9245）上代理 Vite，因此請將server.port設為該連接埠，並同時設定strictPort: true。這只是一般的 Vite 設定，不涉及任何 Wails 外掛程式。

• 選用功能——具型別的自訂事件。內建範本也會註冊@wailsio/runtime/plugins/vite外掛程式。只有在使用具型別的自訂事件時才需要它：它會將產生的事件型別定義注入執行階段，而且在繫結產生前會使建置失敗。如果您只使用以字串為基礎的Events.On("time", …) API，可以省略它。

其餘一切——元件、路由、狀態與樣式——完全由您的框架決定。

使用 Vite 建立任何框架的初始專案

最快的方法是從內建範本開始（如此即可取得main.go、Taskfile、建置資產及可運作的 Go 服務），然後將frontend/替換成您框架的全新 Vite 專案。

wails3 init -n myapp
cd myapp

# From the project root — e.g. Solid, Preact, Lit, Svelte, Vue, React, Vanilla
rm -rf frontend
npm create vite@latest frontend -- --template solid

cd frontend
npm install @wailsio/runtime

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    host: "127.0.0.1",
    port: Number(process.env.WAILS_VITE_PORT) || 9245,
    strictPort: true,
  },
});

import { defineConfig } from "vite";
import wails from "@wailsio/runtime/plugins/vite";

export default defineConfig({
  plugins: [wails("./bindings")],
  server: { host: "127.0.0.1", port: Number(process.env.WAILS_VITE_PORT) || 9245, strictPort: true },
});

wails3 generate bindings

import { GreetService } from "./bindings/changeme";

const greeting = await GreetService.Greet("World");

wails3 dev

具備自有初始專案建立工具的框架

少數框架不是透過 Vite 的create範本建立，而是有自己的工具。它們仍然可以使用——只要以其原生命令建立初始專案，再加入 Wails 外掛程式即可：

• SvelteKit：npx sv create frontend。請使用靜態配接器（@sveltejs/adapter-static），使其建置為靜態套件，並停用 SSR。
• Qwik：npm create qwik@latest。請使用靜態（SSG）配接器。
• Angular：使用ng new建立初始專案，將outputPath設為dist，並讓建置指令碼指向ng build。

規則一律相同：在frontend/dist/中產生靜態建置，保留@wailsio/runtime Vite 外掛程式（或直接匯入執行階段），並從frontend/bindings/匯入您的 Go 繫結。