跳到主要內容

Vite

本指南將引導您使用前端建置工具 Vite 建立您的第一個 Tauri 應用程式。

資訊

在繼續之前，請確保您已完成先決條件，以建立可運作的開發環境。

Tauri 是一個使用任何前端框架和 Rust 核心來建置桌面應用程式的框架。每個應用程式包含兩個部分

  1. 建立視窗並向這些視窗公開原生功能的 Rust 二進位檔
  2. 您選擇的前端，在視窗內產生使用者介面

以下，我們將首先建立前端架構、設定 Rust 專案，最後向您展示如何在兩者之間進行通訊。

create-tauri-app

建立新專案最簡單的方法是使用create-tauri-app 工具程式。它提供純 HTML/CSS/JavaScript 和許多前端框架（如 React、Svelte 和 Yew）的意見化範本。

sh <(curl https://create.tauri.app/sh)

請注意，如果您使用 create-tauri-app，則不需要遵循本指南的其餘部分，但我們仍建議您閱讀它以了解設定。

以下是我們將建立的預覽

Application Preview Application Preview

建立前端​

Vite 是一個前端打包器和建置工具，表示它提供了各種生活品質功能，例如開發期間的熱模組重新載入 (HMR)，但它在建置生產環境時，也會將您的原始碼轉換為最佳化的 HTML、CSS 和 JavaScript。我們推薦 Vite，因為它的速度、易於設定和大量的外掛生態系統。

Vite 附帶一個類似於 create-tauri-app 的架構實用程式，可以從許多預定義的範本快速設定一個新專案。您可以從許多前端框架中進行選擇，例如 React、Svelte 或 Vue。對於本指南，我們將選擇 vanilla-ts 範本，以建立一個沒有任何前端框架的簡單專案。

npm create vite@latest

  1. 專案名稱
    這將會是您的 JavaScript 專案名稱。對應於此實用程式將建立的資料夾名稱，但對您的應用程式沒有其他影響。您可以在這裡使用任何您想要的。名稱。

  2. 選擇一個框架
    如果您計畫稍後使用前端框架，您可以在這裡選擇它。對於本指南，我們假設您選擇 vanilla。

  3. 選擇一個變體
    Vite 為所有範本提供TypeScript 和純 JavaScript 變體，您可以在這裡選擇變體。我們強烈推薦 TypeScript，因為它可以幫助您更快、更有效率地撰寫更安全、更易於維護的程式碼。對於本指南，我們假設您選擇 vanilla-ts。

在您的終端機中，cd 進入新的 Vite 專案資料夾。

透過 vite 指令啟動前端時，Vite 會在專案根目錄中尋找名為 vite.config.ts 的設定檔。我們想要自訂這個檔案，以取得與 Tauri 最佳的相容性。如果它沒有由上述的腳手架建立（例如，如果你使用的是純 JavaScript），你可能需要在專案的根目錄中建立 vite.config.ts 檔案。

使用以下內容更新檔案

vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  // prevent vite from obscuring rust errors
  clearScreen: false,
  // Tauri expects a fixed port, fail if that port is not available
  server: {
    strictPort: true,
  },
  // to access the Tauri environment variables set by the CLI with information about the current target
  envPrefix: ['VITE_', 'TAURI_PLATFORM', 'TAURI_ARCH', 'TAURI_FAMILY', 'TAURI_PLATFORM_VERSION', 'TAURI_PLATFORM_TYPE', 'TAURI_DEBUG'],
  build: {
    // Tauri uses Chromium on Windows and WebKit on macOS and Linux
    target: process.env.TAURI_PLATFORM == 'windows' ? 'chrome105' : 'safari13',
    // don't minify for debug builds
    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
    // produce sourcemaps for debug builds
    sourcemap: !!process.env.TAURI_DEBUG,
  },
})
資訊

請注意，如果你沒有使用純 JavaScript，你必須保留此檔案中已有的特定框架外掛程式。

建立 Rust 專案​

每個 Tauri 應用程式的核心都是一個 Rust 二進位檔，它透過名為 tauri 的 Rust crate 來管理視窗、網頁檢視和呼叫作業系統。這個專案是由 Cargo 管理，它是 Rust 的官方套件管理員和通用建置工具。

我們的 Tauri CLI 在幕後使用 Cargo，因此你很少需要直接與它互動。Cargo 有許多透過我們的 CLI 無法使用的更多有用功能，例如測試、程式碼檢查和格式化，因此請參閱他們的 官方文件 以取得更多資訊。

安裝 Tauri CLI

如果你尚未安裝 Tauri CLI，你可以使用下列其中一個指令進行安裝。不確定要使用哪一個嗎？查看 常見問題解答條目。

npm install --save-dev @tauri-apps/cli
要讓 npm 正確偵測 Tauri，你需要將它新增到 package.json 檔案中的「scripts」區段
package.json
"scripts": {
  "tauri": "tauri"
}

若要建立一個預先設定好使用 Tauri 的 Rust 最小專案，請開啟終端機並執行下列指令

npm run tauri init

它會引導你完成一系列問題

  1. 你的應用程式名稱是什麼？
    這將會是你的最終套件名稱，以及作業系統會如何稱呼你的應用程式。你可以使用任何你想要的這裡。

  2. 視窗標題應該是什麼？
    這將會是預設主視窗的標題。你可以使用任何你想要的標題。

  3. 你的網路資源（HTML/CSS/JS）相對於將建立的 <current dir>/src-tauri/tauri.conf.json 檔案位於何處？
    這是 Tauri 在建置 生產環境時會從中載入你的前端資源的路徑。
    使用 ../dist 作為這個值。

  4. 你的開發伺服器的 URL 是什麼？
    這可以是 Tauri 在 開發期間會載入的 URL 或檔案路徑。
    使用 http://localhost:5173 作為這個值。

  5. 你的前端開發指令是什麼？
    這是用來啟動你的前端開發伺服器的指令。
    使用 npm run dev（請務必調整為使用你選擇的套件管理員）。

  6. 你的前端建置指令是什麼？
    這是用來建置你的前端檔案的指令。
    使用 npm run build（請務必調整為使用你選擇的套件管理員）。
資訊

如果你熟悉 Rust，你會注意到 tauri init 的外觀和運作方式很像 cargo init。如果你偏好完全手動設定，你可以只使用 cargo init 並加入必要的 Tauri 相依性。

tauri init 指令會產生一個名為 src-tauri 的資料夾。對於 Tauri 應用程式來說，將所有核心相關檔案放置到這個資料夾中是一種慣例。讓我們快速瀏覽一下這個資料夾的內容

  • Cargo.toml
    Cargo 的清單檔案。你可以宣告你的應用程式所依賴的 Rust 箱子、你的應用程式的元資料，以及更多。有關完整參考，請參閱 Cargo 的清單格式。

  • tauri.conf.json
    此檔案可讓您自訂 Tauri 應用程式的各個面向，從應用程式名稱到允許的 API 清單。請參閱 Tauri 的 API 設定，以取得支援選項的完整清單，以及每個選項的詳細說明。

  • src/main.rs
    這是 Rust 程式進入點，也是我們引導進入 Tauri 的地方。您會在其中找到兩個區段

    src/main.rs
     #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

    fn main() {
    tauri::Builder::default()
       .run(tauri::generate_context!())
       .expect("error while running tauri application");
    }

    從 cfg! 巨集 開始的行只有一個目的：停用命令提示字元視窗，如果在 Windows 上執行已套件的應用程式，此視窗通常會彈出。如果您使用 Windows，請嘗試將其註解掉，看看會發生什麼事。

    main 函式是進入點，也是程式執行時呼叫的第一個函式。

  • 圖示
    您很可能希望為應用程式設定一個亮眼的圖示！為了讓您快速上手，我們包含了一組預設圖示。您應該在發布應用程式之前將這些圖示換掉。進一步了解 Tauri 的 圖示功能指南 中的各種圖示格式。

現在我們已經建立好前端架構，並初始化 Rust 專案，建立的 tauri.conf.json 檔案應該如下所示

src-tauri/tauri.conf.json
{
  "build": {
    // This command will execute when you run `tauri build`.
    "beforeBuildCommand": "npm run build",
    // This command will execute when you run `tauri dev`
    "beforeDevCommand": "npm run dev",
    "devPath": "http://localhost:5173",
    "distDir": "../dist"
  },

這樣就完成了！現在您可以在終端機中執行以下指令，以啟動應用程式的開發版本

npm run tauri dev

Application Window Application Window

呼叫指令​

Tauri 讓您能以原生功能強化您的前端。我們稱這些為 指令，基本上是您可以從前端 JavaScript 呼叫的 Rust 函式。這讓您能夠以效能更高的 Rust 程式碼處理繁重的處理或呼叫作業系統。

讓我們舉一個簡單的範例

src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

命令就像任何一般的 Rust 函式，但額外加上 #[tauri::command] 屬性巨集，讓你的函式可以與 JavaScript 環境溝通。

最後，我們也需要告訴 Tauri 我們新建立的命令，以便它可以適當地路由呼叫。這是透過結合 .invoke_handler() 函式和你可以看到下方的 generate_handler![] 巨集來完成的

src-tauri/src/main.rs
fn main() {
  tauri::Builder::default()
    .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

現在你已經準備好從前端呼叫你的命令了！

要呼叫我們新建立的命令，我們將使用 @tauri-apps/api JavaScript 函式庫。它透過方便的 JavaScript 抽象提供對核心功能的存取，例如視窗、檔案系統等等。你可以使用你最喜歡的 JavaScript 套件管理員來安裝它

npm install @tauri-apps/api

安裝函式庫後，你可以修改你的 main.ts 檔案來呼叫命令

src/main.ts
import { invoke } from '@tauri-apps/api'

// now we can call our Command!
// Right-click the application background and open the developer tools.
// You will see "Hello, World!" printed in the console!
invoke('greet', { name: 'World' })
  // `invoke` returns a Promise
  .then((response) => console.log(response))
提示

如果你想進一步了解 Rust 和 JavaScript 之間的溝通，請閱讀 Tauri 跨程序溝通指南。