Tauri 桌面开发基础入门（适合前端开发者）

一、Tauri 是什么？

Tauri 是一个让你用 HTML / CSS / JS / Vue / React 来构建桌面应用的框架。
底层用 Rust 提供系统功能支持（窗口、文件、通知等）。
它的最大特点是：

• ⚙️ 体积小（打包后仅 3–10 MB）
• 🚀 跨平台（Windows / macOS / Linux）
• 🔒 安全高效（系统级 WebView + Rust 沙箱）

二、安装环境要求

在安装前，你需要确认本地环境满足以下条件：

三、安装 Rust

打开终端，输入：

# 安装 Rust
curl https://sh.rustup.rs -sSf | sh

安装完后运行：

rustc --version
cargo --version

能看到版本号就说明成功。

💡 Windows 用户可直接访问：https://win.rustup.rs 下载安装包。

四、Windows 用户额外要求

⚠️ Windows 上必须安装 Microsoft Edge WebView2 运行库。

下载地址：
🔗 https://developer.microsoft.com/en-us/microsoft-edge/webview2/

选择 “Evergreen Bootstrapper” 安装即可（自动更新版）。

五、创建一个 Tauri 项目

官方推荐两种方式：

方式 1：使用 Vite 创建（推荐 ）

# 1️⃣ 创建一个前端项目
npm create vite@latest my-tauri-app -- --template vue
cd my-tauri-app

# 2️⃣ 安装 Tauri
npm install --save-dev @tauri-apps/cli
npm install @tauri-apps/api

方式 2：直接用官方脚手架

npm create tauri-app
# 或者
yarn create tauri-app
# 或者
pnpm create tauri-app

然后根据提示选择前端框架（Vue、React、Svelte、Vanilla 等）。

六、项目结构说明

安装完成后目录结构大致如下：

my-tauri-app/
├── src/                     # 前端代码
├── dist/                    # 前端构建输出（自动生成）
├── src-tauri/               # Rust 后端逻辑目录
│   ├── src/
│   │   └── main.rs          # Rust 入口文件（一般不用改）
│   ├── tauri.conf.json      # Tauri 配置文件
│   └── Cargo.toml           # Rust 构建描述文件
├── package.json
└── vite.config.js

七、运行开发模式

npm run tauri dev

Tauri 会：

1. 启动 Vite 开发服务器；
2. 自动打开一个原生桌面窗口；
3. 在窗口中运行你的网页前端。

就像是网页 + 桌面融合的调试模式。

八、构建独立可执行文件

发布版本打包命令：

npm run tauri build

生成结果：

src-tauri/target/release/
└── my-tauri-app.exe   ← 可直接运行的桌面程序（几 MB）

macOS 下会生成 .app，Linux 下是 .AppImage。

九、在前端中调用系统功能

在你的前端 JS 代码中，可以直接使用 Tauri API：

import { open } from '@tauri-apps/api/dialog';
import { writeText } from '@tauri-apps/api/clipboard';
import { appWindow } from '@tauri-apps/api/window';

async function example() {
  await writeText('复制成功！');
  const file = await open({ multiple: false });
  console.log('选择的文件：', file);
  await appWindow.minimize();
}

Tauri 内置的 @tauri-apps/api 包提供了：

• 文件读写
• 剪贴板
• 通知
• 对话框
• 窗口控制
• 系统命令执行（Rust 部分）

十、配置文件（tauri.conf.json）

示例：

{
  "package": {
    "productName": "MyTauriApp",
    "version": "1.0.0"
  },
  "tauri": {
    "windows": [
      {
        "title": "Tauri 应用",
        "width": 800,
        "height": 600
      }
    ],
    "bundle": {
      "identifier": "com.example.mytauriapp",
      "icon": ["icons/app.ico"]
    }
  }
}

十一、项目更新与文档

• 官网文档：
  🔗 https://tauri.app/
• 官方中文文档（社区版）：
  🔗 https://tauri.app/zh-cn/

更新 CLI：

npm update @tauri-apps/cli

十二、总结（最简安装路径）