跳至主要內容
LinPolly
文章 程式開發

Tauri 2.0 入門：用 Web 技術打造輕量桌面應用

8 分鐘閱讀 2,100 字

為什麼你應該認識 Tauri？

如果你曾經用 Electron 做過桌面應用，你大概對那個「一個 Hello World 就要 150MB」的體驗印象深刻。沒辦法，Electron 要打包一整個 Chromium 引擎，就像你只是想寄一封信，卻得自己帶一間郵局出門。

Tauri 的出現，正是為了解決這個痛點。它用系統內建的 WebView（Windows 上是 WebView2、macOS 是 WKWebView、Linux 是 WebKitGTK）取代了 Chromium，後端則用 Rust 取代 Node.js。結果？同樣一個應用，Tauri 打包後通常只有 2-10MB，記憶體佔用也只有 Electron 的 三分之一到五分之一。

以下是一個簡單的對比：

特性 Electron Tauri 2.0
打包大小 150MB+ 2-10MB
記憶體佔用 150-300MB 30-80MB
後端語言 Node.js Rust
渲染引擎 Chromium（內建） 系統 WebView
啟動速度 較慢 極快

Tauri 2.0 的核心架構

Tauri 2.0 的架構可以用一句話概括：Rust 負責重活，WebView 負責漂亮的臉蛋。

整體分為三層：

  1. Rust Core（核心層）：處理系統呼叫、檔案操作、視窗管理、安全策略等。這是 Tauri 的心臟，也是它效能優異的關鍵。
  2. WebView 層：你的前端程式碼（HTML/CSS/JavaScript）在這裡執行。它不是一個完整的瀏覽器，而是系統提供的輕量渲染引擎。
  3. IPC Bridge（橋接層）：前後端透過 Tauri 的 IPC（Inter-Process Communication）機制溝通。前端可以呼叫 Rust 函式，Rust 也能向前端發送事件。

Tauri 2.0 相較於 1.x 版本，最大的變化是引入了權限系統（Permissions）和插件架構（Plugin System）。這表示檔案存取、系統通知等功能都需要在設定中明確授權，安全性大幅提升。

環境安裝

在開始之前，你需要準備以下工具：

安裝 Rust

Rust 是 Tauri 後端的基礎。到 rustup.rs 安裝 Rust 工具鏈：

# 安裝 Rust（會同時安裝 cargo 套件管理器）
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# 驗證安裝
rustc --version
cargo --version

安裝 Node.js

前端部分需要 Node.js。建議用 nvm 或 fnm 管理版本，至少需要 Node.js 18 以上：

node --version  # 確認 >= 18.0.0
npm --version

系統依賴

不同作業系統有不同的依賴需求：

  • Windows：安裝 Visual Studio Build Tools 和 WebView2（Windows 10/11 通常已內建）
  • macOS：安裝 Xcode Command Line Tools（xcode-select --install）
  • Linux：需要安裝 webkit2gtk 和相關開發套件

在 Ubuntu/Debian 上：

sudo apt update
sudo apt install libwebkit2gtk-4.1-dev \
  build-essential \
  curl \
  wget \
  file \
  libxdo-dev \
  libssl-dev \
  libayatana-appindicator3-dev \
  librsvg2-dev

建立第一個 Tauri 專案

Tauri 提供了互動式 CLI 工具來建立專案。執行以下指令：

npm create tauri-app@latest

接著你會看到一連串的選項：

  1. Project name：輸入你的專案名稱，例如 my-tauri-app
  2. Frontend language：選擇 TypeScript（推薦）
  3. Package manager：選擇 npm、yarn 或 pnpm
  4. UI template：可以選 Vanilla、Vue、React、Svelte 等

選好之後，CLI 會自動幫你建立專案骨架並安裝依賴。

專案結構解析

建立完成後，你會看到類似這樣的目錄結構：

my-tauri-app/
├── src/                    # 前端原始碼
│   ├── main.ts            # 前端入口
│   ├── App.vue            # 主元件（如果選了 Vue）
│   └── styles.css         # 樣式
├── src-tauri/             # Tauri / Rust 後端
│   ├── src/
│   │   └── lib.rs         # Rust 程式碼入口
│   ├── capabilities/      # 權限設定目錄
│   ├── Cargo.toml         # Rust 依賴管理
│   ├── tauri.conf.json    # Tauri 主設定檔
│   └── build.rs           # 建構腳本
├── package.json           # 前端依賴
├── vite.config.ts         # Vite 設定
└── tsconfig.json          # TypeScript 設定

關鍵是 src-tauri/ 這個目錄，它就是 Rust 後端的所在地。前端程式碼放在根目錄的 src/，兩者各司其職。

重要設定檔：tauri.conf.json

tauri.conf.json 是整個 Tauri 專案的核心設定。以下是幾個重要欄位：

{
  "$schema": "https://raw.githubusercontent.com/tauri-apps/tauri/dev/crates/tauri-cli/schema.json",
  "productName": "my-tauri-app",
  "version": "0.1.0",
  "identifier": "com.myapp.dev",
  "build": {
    "frontendDist": "../dist",
    "devUrl": "http://localhost:5173",
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build"
  },
  "app": {
    "title": "My Tauri App",
    "windows": [
      {
        "title": "My Tauri App",
        "width": 1024,
        "height": 768,
        "resizable": true,
        "decorations": true
      }
    ],
    "security": {
      "csp": null
    }
  }
}
  • build.frontendDist：前端建構產出的目錄
  • build.devUrl：開發模式下前端的 URL
  • build.beforeDevCommand：啟動開發伺服器的指令
  • app.windows：視窗的預設設定（大小、標題、是否可調整大小等）

第一次執行

一切就緒後，進入專案目錄並啟動開發模式：

cd my-tauri-app
npm install
npm run tauri dev

第一次執行需要編譯 Rust 程式碼，可能要等個一兩分鐘（之後增量編譯會快很多）。編譯完成後，你會看到一個原生視窗彈出，裡面是你的前端頁面。

恭喜！你已經成功啟動了第一個 Tauri 應用。

小結

Tauri 2.0 帶來了一個令人興奮的可能性：用你已經熟悉的 Web 技術，打造出幾乎和原生應用一樣輕量、快速的桌面軟體。它不需要你成為 Rust 專家（雖然懂 Rust 確實能做更多事），前端框架的選擇也非常自由。

在下一篇文章中，我們會深入探討如何把 Vue 3 和 Tauri 整合起來，建立一個功能更完整的桌面應用。期待你的實驗！

#Tauri #Rust #TypeScript

分享這篇文章