Skip to content
Tauri 中文网
指南 手册 公告 🌐 Nodejs.cn

开发

现在你已经完成所有设置，可以使用 Tauri 运行你的应用了。

🌐 Now that you have everything set up, you are ready to run your application using Tauri.

如果你正在使用 UI 框架或 JavaScript 打包工具，你很可能可以使用一个开发服务器，这将加快你的开发过程，所以如果你还没有配置应用的开发 URL 和启动它的脚本，你可以通过 devUrl 和 beforeDevCommand 配置值来进行配置：

🌐 If you are using a UI framework or JavaScript bundler, you likely have access to a development server that will speed up your development process, so if you haven’t configured your app’s dev URL and script that starts it, you can do so via the devUrl and beforeDevCommand config values:

tauri.conf.json
{
  "build": {
    "devUrl": "http://localhost:3000",
    "beforeDevCommand": "npm run dev"
  }
}

否则，如果你没有使用 UI 框架或模块打包器，你可以将 Tauri 指向你的前端源代码，Tauri CLI 将为你启动一个开发服务器：

🌐 Otherwise, if you are not using a UI framework or module bundler, you can point Tauri to your frontend source code and the Tauri CLI will start a development server for you:

tauri.conf.json
{
  "build": {
    "frontendDist": "./src"
  }
}

请注意，在此示例中，src 文件夹必须包含一个 index.html 文件，以及前端加载的任何其他资源。

🌐 Note that in this example, the src folder must include an index.html file along with any other assets loaded by your frontend.

开发你的桌面应用

Section titled “开发你的桌面应用”

🌐 Developing Your Desktop Application

要为桌面开发你的应用，请运行 tauri dev 命令。

🌐 To develop your application for desktop, run the tauri dev command.

npm run tauri dev

第一次运行此命令时，Rust 包管理器可能需要 几分钟 来下载和构建所有必需的包。由于这些包会被缓存，后续构建会快得多，因为只需要重建你的代码。

🌐 The first time you run this command, the Rust package manager may need several minutes to download and build all the required packages. Since they are cached, subsequent builds are much faster, as only your code needs rebuilding.

一旦 Rust 完成构建，webview 就会打开，显示你的 web 应用。你可以对你的 web 应用进行修改，如果你的工具支持，它应该会自动更新，就像浏览器一样。

🌐 Once Rust has finished building, the webview opens, displaying your web app. You can make changes to your web app, and if your tooling supports it, the webview should update automatically, just like a browser.

打开 Web 检查器

Section titled “打开 Web 检查器”

🌐 Opening the Web Inspector

你可以通过在网页视图上右键点击并选择“检查”，或者在 Windows 和 Linux 上使用 Ctrl + Shift + I 快捷键，或在 macOS 上使用 Cmd + Option + I 快捷键，来打开网页检查器以调试你的应用。

🌐 You can open the Web Inspector to debug your application by performing a right-click on the webview and clicking “Inspect” or using the Ctrl + Shift + I shortcut on Windows and Linux or Cmd + Option + I shortcut on macOS.

开发你的移动应用

Section titled “开发你的移动应用”

🌐 Developing Your Mobile Application

移动开发与桌面开发类似，但你必须运行 tauri android dev 或 tauri ios dev:

🌐 Developing for mobile is similar to how desktop development works, but you must run tauri android dev or tauri ios dev instead:

npm run tauri [android|ios] dev

第一次运行此命令时，Rust 包管理器可能需要 几分钟 来下载和构建所有必需的包。由于这些包会被缓存，后续构建会快得多，因为只需要重建你的代码。

🌐 The first time you run this command, the Rust package manager may need several minutes to download and build all the required packages. Since they are cached, subsequent builds are much faster, as only your code needs rebuilding.

开发服务器

Section titled “开发服务器”

🌐 Development Server

移动端的开发服务器的工作方式与桌面端类似，但如果你尝试在真实的 iOS 设备上运行，必须将其配置为监听由 Tauri CLI 提供的特定地址，该地址在 TAURI_DEV_HOST 环境变量中定义。这个地址可以是公共网络地址（这是默认行为），也可以是实际的 iOS 设备 TUN 地址 —— 这种方式更安全，但当前需要 Xcode 来连接设备。

🌐 The development server on mobile works similarly to the desktop one, but if you are trying to run on a physical iOS device, you must configure it to listen to a particular address provided by the Tauri CLI, defined in the TAURI_DEV_HOST environment variable. This address is either a public network address (which is the default behavior) or the actual iOS device TUN address — which is more secure, but currently needs Xcode to connect to the device.

要使用 iOS 设备的地址，你必须在运行 dev 命令之前打开 Xcode，并确保你的设备通过网络连接，并在“窗口 > 设备与模拟器”菜单中可见。 然后，你必须运行 tauri ios dev --force-ip-prompt 来选择 iOS 设备地址（一个以 ::2 结尾的 IPv6 地址）。

🌐 To use the iOS device’s address you must open Xcode before running the dev command and ensure your device is connected via network in the Window > Devices and Simulators menu. Then you must run tauri ios dev --force-ip-prompt to select the iOS device address (an IPv6 address ending with ::2).

为了让你的开发服务器在正确的主机上监听，以便 iOS 设备可以访问，你必须调整其配置使用提供的 TAURI_DEV_HOST 值。下面是一个 Vite 的示例配置：

🌐 To make your development server listen on the correct host to be accessible by the iOS device, you must tweak its configuration to use the TAURI_DEV_HOST value if it has been provided. Here is an example configuration for Vite:

import { defineConfig } from 'vite';


const host = process.env.TAURI_DEV_HOST;


// https://vitejs.dev/config/
export default defineConfig({
  clearScreen: false,
  server: {
    host: host || false,
    port: 1420,
    strictPort: true,
    hmr: host
      ? {
          protocol: 'ws',
          host,
          port: 1421,
        }
      : undefined,
  },
});

查看框架的设置指南以获取更多信息。

🌐 Check your framework’s setup guide for more information.

设备选择

Section titled “设备选择”

🌐 Device Selection

默认情况下，mobile dev 命令会尝试在已连接的设备上运行你的应用，并在失败时提示你选择要使用的模拟器。要预先定义运行目标，你可以将设备或模拟器名称作为参数提供：

🌐 By default, the mobile dev command tries to run your application on a connected device, and falls back to prompting you to select a simulator to use. To define the run target upfront, you can provide the device or simulator name as an argument:

npm run tauri ios dev 'iPhone 15'

使用 Xcode 或 Android Studio

Section titled “使用 Xcode 或 Android Studio”

🌐 Using Xcode or Android Studio

或者你可以选择使用 Xcode 或 Android Studio 来开发你的应用。使用 IDE 而不是命令行工具可以帮助你排除一些开发问题。要打开移动 IDE 而不是在已连接的设备或模拟器上运行，请使用 --open 标志：

🌐 Alternatively you can choose to use Xcode or Android Studio to develop your application. This can help you troubleshoot some development issues by using the IDE instead of the command line tools. To open the mobile IDE instead of running on a connected device or simulator, use the --open flag:

npm run tauri [android|ios] dev --open

打开 Web 检查器

Section titled “打开 Web 检查器”

🌐 Opening the Web Inspector

  • iOS

    必须使用 Safari 访问 iOS 应用的 Web 检查器。

    在你的 Mac 上打开 Safari，在菜单栏中选择 Safari > 设置，点击 高级，然后选择 显示网页开发者功能。

    如果你在物理设备上运行，必须在 设置 > Safari > 高级 中启用 网页检查器。

    按照所有步骤操作后，你应该会在 Safari 中看到一个 开发 菜单，在这里你可以找到已连接的设备和应用以进行检查。选择你的设备或模拟器，然后点击 localhost 打开 Safari 开发者工具窗口。

  • Android

    检查器在 Android 模拟器上默认启用，但必须为物理设备启用它。 将你的 Android 设备连接到计算机，在 Android 设备上打开 设置 应用，选择 关于手机，滚动到版本号，并点击 7 次。 这将为你的 Android 设备启用开发者模式和 开发者选项 设置。

    要在你的设备上启用应用调试，你必须进入 开发者选项 设置，打开开发者选项开关，并启用 USB 调试。

    Android的网页检查器由Google Chrome的开发者工具提供支持，可以通过在计算机上的Chrome浏览器中导航到chrome://inspect来访问。如果你的Android应用正在运行，你的设备或模拟器应该会出现在远程设备列表中，你可以通过点击与你的设备匹配的条目上的检查来打开开发者工具。

故障排除

Section titled “故障排除”

🌐 Troubleshooting

  1. 在 Xcode 上运行构建脚本时出错

Tauri 通过创建一个构建阶段来钩子 iOS Xcode 项目，该构建阶段执行 Tauri CLI，将 Rust 源代码编译为在运行时加载的库。构建阶段在 Xcode 进程上下文中执行，因此可能无法使用诸如 PATH 添加之类的 shell 修改，因此在使用可能不兼容的工具（例如 Node.js 版本管理器）时要小心。

🌐 Tauri hooks into the iOS Xcode project by creating a build phase that executes the Tauri CLI to compile the Rust source as a library that is loaded at runtime. The build phase is executed on the Xcode process context, so it might not be able to use shell modifications such as PATH additions, so be careful when using tools such as Node.js version managers which may not be compatible.

  1. 首次执行 iOS 应用时提示网络权限

当你第一次执行 tauri ios dev 时，你可能会看到 iOS 提示你授予查找和连接本地网络设备的权限。需要此权限是因为要从 iOS 设备访问你的开发服务器，它必须在本地网络上可见。要在你的设备上运行应用，你必须点击允许并重启应用。

🌐 When you first execute tauri ios dev, you might see iOS prompting you for permission to find and connect to devices on your local network. This permission is required because, to access your development server from an iOS device, it must be exposed on the local network. To run your app on your device, you must click Allow and restart your application.

对源代码更改做出反应

Section titled “对源代码更改做出反应”

🌐 Reacting to Source Code Changes

类似于你的 webview 实时反映更改，tauri dev 会监视你的 src-tauri 文件夹及工作区中依赖的 crate 是否有更改，因此每当你修改它们时，你的应用会自动重新构建并重启。

🌐 Similarly to how your webview reflects changes in real time, tauri dev watches your src-tauri folder and its dependent crates in the workspace for changes, so your application is automatically rebuilt and restarted whenever you modify them.

你可以通过在 tauri dev 命令上使用 --no-watch 标志来禁用此行为。

🌐 You can disable this behavior by using the --no-watch flag on the tauri dev command.

要忽略监视某些文件，你可以创建像普通 .gitignore 文件一样工作的 .taurignore 文件：

🌐 To ignore watching certain files, you can create .taurignore files which work like regular .gitignore files:

build/
src/generated/*.rs
deny.toml

.taurignore 文件通常放在 src-tauri 目录或 cargo workspace 根文件夹中。 目前，tauri dev 会在被监视文件夹的公共祖级目录和 Cargo workspace 根文件夹的任何位置查找 .taurignore 文件。

使用浏览器 DevTools

Section titled “使用浏览器 DevTools”

🌐 Using the Browser DevTools

Tauri 的 API 仅在你的应用窗口中工作，因此一旦你开始使用它们，你将无法再在系统的浏览器中打开前端。

🌐 Tauri’s APIs only work in your app window, so once you start using them you won’t be able to open your frontend in your system’s browser anymore.

如果你更喜欢使用浏览器的开发者工具，你必须配置 tauri-invoke-http 以通过 HTTP 服务器桥接 Tauri API 调用。

🌐 If you prefer using your browser’s developer tooling, you must configure tauri-invoke-http to bridge Tauri API calls through a HTTP server.

源代码控制

Section titled “源代码控制”

🌐 Source Control

在你的项目仓库中，你应将 src-tauri/Cargo.lock 与 src-tauri/Cargo.toml 一起提交到 git，因为 Cargo 使用锁文件来提供确定性的构建。因此，建议所有应用都提交它们的 Cargo.lock。你不应提交 src-tauri/target 文件夹或其任何内容。

🌐 In your project repository, you SHOULD commit the src-tauri/Cargo.lock along with the src-tauri/Cargo.toml to git because Cargo uses the lockfile to provide deterministic builds. As a result, it is recommended that all applications check in their Cargo.lock. You SHOULD NOT commit the src-tauri/target folder or any of its contents.

Tauri 中文网 - 粤ICP备13048890号
Nodejs.cn 旗下网站