使用其他前端框架

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 服务），然后用适用于所选框架的新 Vite 项目替换frontend/。

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 绑定。