跳至主要内容

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

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

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

  4. 您的开发服务器的 URL 是什么？
    这可以是 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 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": "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 进程间通信 指南。