Tauriv2+SvelteKit桌面/移动应用开发技能Skill tauri

这个技能专注于使用Tauri v2框架结合SvelteKit前端技术,开发高性能、小体积的跨平台桌面和移动应用程序。它通过Rust后端和操作系统原生Webview实现安全、高效的进程间通信,适用于构建轻量级应用,关键词包括Tauri、SvelteKit、Rust、Webview、IPC、桌面应用、移动应用、安全模式、跨平台开发。

移动开发 0 次安装 0 次浏览 更新于 3/20/2026

name: tauri description: Tauri v2 + SvelteKit 桌面/移动应用专家。当使用Tauri命令、tauri.conf.json、src-tauri/、#[tauri::command]、invoke()、IPC、Tauri插件、功能、权限、WRY、TAO、tauri::Builder、tauri::State、Tauri事件、通道、WebviewWindow、AppHandle、tauri-driver或Tauri安全模式时自动加载。

Tauri v2 + SvelteKit

Tauri 是一个用于构建小巧、快速的桌面和移动应用程序的框架。它将Rust后端(核心进程)与操作系统原生Webview渲染的前端结合起来——无需捆绑浏览器引擎。应用程序大小从600KB以下开始。我们始终使用 SvelteKitadapter-static(SPA模式,ssr = false)。

架构概述

SvelteKit 前端(WebView)
      │  invoke() / 事件 / 通道
      ▼
┌─────────────────────────┐
│  Tauri 核心进程        │  Rust — 拥有操作系统访问、状态、IPC路由
│  (tauri::Builder)       │
└─────────────────────────┘
      │
      ├── WRY:跨平台Webview渲染
      └── TAO:窗口创建与管理
  • 核心进程(Rust):入口点、操作系统访问、状态、IPC中心、安全执行
  • WebView进程:使用系统Webview(WKWebView/Edge WebView2/webkitgtk)渲染SvelteKit应用
  • IPC:通过命令(invoke)和事件的消息传递 — 所有通过核心路由

项目结构

├── package.json
├── svelte.config.js          # adapter-static,fallback:'index.html'
├── src/
│   ├── routes/
│   │   └── +layout.ts        # export const ssr = false
│   └── ...
└── src-tauri/
    ├── Cargo.toml
    ├── tauri.conf.json        # devUrl,frontendDist,应用配置
    ├── build.rs               # 必须调用 tauri_build::build()
    ├── src/
    │   ├── lib.rs             # Builder,命令,状态
    │   └── main.rs            # 桌面入口点
    ├── 功能/
    │   └── default.json       # 每个窗口的权限绑定
    ├── 权限/                  # 自定义TOML权限定义
    └── 图标/

快速命令参考

Rust API 目的
#[tauri::command] 定义可从前端调用的命令
tauri::generate_handler![cmd1, cmd2] 使用Builder注册命令
tauri::Builder::default().manage(state) 注册管理状态
State<'_, T> 在命令中访问管理状态
AppHandle 在命令中访问应用句柄
WebviewWindow 在命令中访问调用窗口
tauri::ipc::Channel<T> 流式数据传输到前端
tauri::ipc::Response 高效返回原始字节
app.emit("事件", 负载) 向前端发送全局事件
app.emit_to("标签", "事件", 负载) 发送到特定窗口
JS/TS API (@tauri-apps/api) 目的
invoke('cmd', { 参数 }) 调用Rust命令
listen('事件', 处理器) 监听后端事件
emit('事件', 负载) 向后端发送事件
Channel<T> 从Rust接收流式数据

SvelteKit 设置要点

// svelte.config.js
import adapter from '@sveltejs/adapter-static';
export default { kit: { adapter: adapter({ fallback: 'index.html' }) } };
// src/routes/+layout.ts
export const ssr = false;
// tauri.conf.json
{
  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devUrl": "http://localhost:5173",
    "frontendDist": "../build"
  }
}

安全模型(基于功能)

权限(TOML) → 功能(JSON/TOML) → 运行时授权
     操作内容            绑定到窗口         在运行时强制执行
  • 前端默认不可信 — 所有后端访问需要明确的功能授予
  • 命令必须在功能文件中列出才能从JS调用
  • 作用域(允许/拒绝)提供细粒度资源边界
  • 隔离模式为高安全应用添加AES-GCM加密IPC

发布构建优化

# src-tauri/Cargo.toml
[profile.release]
codegen-units = 1
lto = true
opt-level = "s"
panic = "abort"
strip = true

参考

  • 入门与SvelteKit — 项目创建、SvelteKit adapter-static设置、项目结构
  • 架构与进程模型 — 多进程设计、WRY/TAO、crate生态系统、大小优化
  • 进程间通信 — 命令、事件、通道、棕地vs隔离模式
  • 安全与权限 — 功能、权限、作用域、CSP、安全生命周期
  • 命令与事件 — 从前端调用Rust、从Rust调用前端、流式传输
  • 开发与配置 — 配置文件、资源、状态管理、图标、开发工作流
  • 测试 — IPC模拟、事件模拟、窗口模拟、WebDriver、tauri-driver