1

xcode-select --install

1
2
3
4
5
6
7
8

sudo apt install -y \
  libwebkit2gtk-4.1-dev \
  libgtk-3-dev \
  libayatana-appindicator3-dev \
  librsvg2-dev \
  libssl-dev \
  libjavascriptcoregtk-4.1-dev \
  libsoup-3.0-dev

1
2
3
4

mkdir -p tauri-app && cd tauri-app

# pnpm-workspace.yaml
nvim pnpm-workspace.yaml

1
2
3

packages:
  - 'frontend'
  - 'src-tauri'

1

pnpm create vite frontend --template react-ts

1

pnpm add -D @tauri-apps/cli@latest -w

1

"@tauri-apps/cli": "^2.11.1"

1

pnpm tauri init

1
2
3
4
5
6

✔ What is your app name? · tauri-app
✔ What should the window title be? · tauri-app
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../frontend/dist
✔ What is the url of your dev server? http://localhost:1420
✔ What is your frontend dev command? · pnpm -F frontend dev
✔ What is your frontend build command? · pnpm -F frontend build

1
2

pnpm install
mkdir -p frontend/dist  # dist 必须存在

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  "productName": "tauri-app",
  "version": "0.1.0",
  "identifier": "com.example.tauri-app",
  "build": {
    "frontendDist": "../frontend/dist",
    "devUrl": "http://localhost:1420",
    "beforeDevCommand": "pnpm -F frontend dev",
    "beforeBuildCommand": "pnpm -F frontend build"
  },
  "app": {
    "windows": [
      {
        "title": "tauri-app",
        "width": 1200,
        "height": 800
      }
    ],
    "security": {
      "csp": null
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# 开发（自动打开 DevTools 调试）
pnpm tauri dev

# 打包
pnpm tauri build

# 结果
# Windows: src-tauri/target/release/tauri-app.exe
# macOS:   src-tauri/target/release/bundle/macos/tauri-app.app
# Linux:   src-tauri/target/release/bundle/deb/*.deb

1
2
3
4

# Cargo.toml (根目录)
[workspace]
members = ["src-tauri"]
resolver = "2"

1
2
3
4
5

**/target/
/src-tauri/gen/schemas

**/node_modules
**/dist

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const host = process.env.TAURI_DEV_HOST;

export default defineConfig({
  plugins: [react()],
  // 防止 Vite 清除 Rust 显示的错误
  clearScreen: false,
  server: {
    port: 5173,
    strictPort: true,    // Tauri 需要固定端口
    host: host || false,
    hmr: host
      ? {
          protocol: "ws",
          host,
          port: 5174,
        }
      : undefined,
    watch: {
      // 告诉 Vite 忽略 src-tauri 目录
      ignored: ["**/src-tauri/**"],
    },
  },
  envPrefix: ["VITE_", "TAURI_ENV_*"],
  build: {
    // Windows 用 chromium，其他用 safari13
    target:
      process.env.TAURI_ENV_PLATFORM == "windows" ? "chrome105" : "safari13",
    minify: !process.env.TAURI_ENV_DEBUG ? "esbuild" : false,
    sourcemap: !!process.env.TAURI_ENV_DEBUG,
  },
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// src-tauri/src/main.rs (或 src/lib.rs)
use tauri::Manager;

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}! 你好, Tauri!", name)
}

#[tauri::command]
async fn fetch_data(url: String) -> Result<String, String> {
    reqwest::get(&url)
        .await
        .map_err(|e| e.to_string())?
        .text()
        .await
        .map_err(|e| e.to_string())
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, fetch_data])
        .setup(|app| {
            #[cfg(debug_assertions)]
            {
                let window = app.get_webview_window("main").unwrap();
                window.open_devtools();
            }
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// frontend/src/App.tsx
import { invoke } from "@tauri-apps/api/core";
import { useState } from "react";

function App() {
  const [greeting, setGreeting] = useState("");

  async function handleClick() {
    const msg = await invoke<string>("greet", { name: "World" });
    setGreeting(msg);
  }

  return (
    <div>
      <button onClick={handleClick}>调用 Rust</button>
      <p>{greeting}</p>
    </div>
  );
}

export default App;

1
2
3
4
5
6
7
8

pnpm tauri add fs
pnpm tauri add dialog
pnpm tauri add notification
pnpm tauri add shell
pnpm tauri add http
pnpm tauri add store
pnpm tauri add window
pnpm tauri add updater

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "默认权限",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "fs:allow-read-text-file",
    "fs:allow-write-text-file",
    "dialog:default",
    "notification:default"
  ]
}

1
2
3
4
5
6
7
8

// Rust
use tauri_plugin_fs::FsExt;

#[tauri::command]
fn read_config(app: tauri::AppHandle) -> Result<String, String> {
    let path = app.path().app_config_dir().unwrap().join("config.json");
    std::fs::read_to_string(path).map_err(|e| e.to_string())
}

1
2
3
4

// 前端
import { readTextFile } from '@tauri-apps/plugin-fs';

const content = await readTextFile('/path/to/file.txt');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

use std::sync::Mutex;

struct AppState {
    counter: Mutex<i32>,
}

#[tauri::command]
fn increment(state: tauri::State<AppState>) -> i32 {
    let mut count = state.counter.lock().unwrap();
    *count += 1;
    *count
}

fn main() {
    tauri::Builder::default()
        .manage(AppState { counter: Mutex::new(0) })
        .invoke_handler(tauri::generate_handler![increment])
        .run(tauri::generate_context!())
        .expect("failed to run app");
}

1
2
3
4
5
6
7

// Rust 发送事件
use tauri::Emitter;

#[tauri::command]
fn start_task(app: tauri::AppHandle) {
    app.emit("task-progress", "started").unwrap();
}

1
2
3
4
5
6
7
8
9

// 前端监听
import { listen } from '@tauri-apps/api/event';

const unlisten = await listen<string>('task-progress', (event) => {
  console.log('收到:', event.payload);
});

// 取消监听
unlisten();

1
2
3
4
5
6
7
8

# 当前平台
pnpm tauri build

# 指定平台（需要对应工具链）
pnpm tauri build --target x86_64-pc-windows-msvc
pnpm tauri build --target x86_64-apple-darwin
pnpm tauri build --target aarch64-apple-darwin
pnpm tauri build --target x86_64-unknown-linux-gnu