跳至主要内容

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 管理窗口、webview 和对操作系统的调用。此项目由 Cargo 管理，Cargo 是 Rust 的官方包管理器和通用构建工具。

我们的 Tauri CLI 在后台使用 Cargo，因此您很少需要直接与它交互。Cargo 还有许多通过我们的 CLI 未公开的更有用的功能，例如测试、代码检查和格式化，因此请参阅其 官方文档 以了解更多信息。

安装 Tauri CLI

如果您尚未安装 Tauri CLI，您可以使用以下命令之一进行安装。不确定使用哪个？查看 常见问题解答条目。

npm install --save-dev @tauri-apps/cli@">1.0.0"
为了让 npm 正确检测 Tauri，您需要将其添加到 `package.json` 文件中的 "scripts" 部分
package.json
"scripts": {
  "tauri": "tauri"
}

要搭建一个预先配置为使用 Tauri 的最小 Rust 项目，请打开终端并运行以下命令

npm run tauri init

它将引导您完成一系列问题

  1. 您的应用程序名称是什么？
    这将是您的最终包的名称，也是操作系统将您的应用程序称为什么。您可以在这里使用任何名称。

  2. 窗口标题应是什么？
    这将是默认主窗口的标题。您可以在这里使用任何标题。

  3. 您的 Web 资源（HTML/CSS/JS）相对于 <current dir>/src-tauri/tauri.conf.json 文件（将被创建）位于何处？
    这是 Tauri 在构建**生产**版本时将从中加载前端资源的路径。
    为此值使用 ../dist。

  4. 您的开发服务器的 URL 是什么？
    这可以是 Tauri 在开发过程中将加载的 URL 或文件路径。 开发.
    为此值使用 https://127.0.0.1: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 crate、有关您的应用程序的元数据等等。有关完整参考，请参见 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": "https://127.0.0.1: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@">1.0.0"

安装该库后，您可以修改您的 `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 的 进程间通信 指南。