Skip to content
Tauri 中文网

开发

现在你有了 一切设置完毕,你就可以使用 Tauri 运行你的应用了。

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

如果你使用的是 UI 框架或 JavaScript 打包器,则你可能可以访问开发服务器,这将加快你的开发过程,因此如果你尚未配置应用的开发 URL 和启动它的脚本,则可以通过 devUrlbeforeDevCommand 配置值进行配置:

¥If you are using an 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"
}
}

:::note 注意

每个框架都有自己的开发工具。涵盖所有内容或保持最新状态超出了本文档的范围。

¥Every framework has its own development tooling. It is outside of the scope of this document to cover them all or stay up to date.

请参阅框架的文档以了解更多信息并确定要配置的正确值。

¥Please refer to your framework’s documentation to learn more and determine the correct values to be configured.

:::

否则,如果你不使用 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 a index.html file along any other assets loaded by your frontend.

开发你的桌面应用

¥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 完成构建后,Web 视图将打开,显示你的 Web 应用。你可以更改你的 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 检查器

¥Opening the Web Inspector

你可以通过右键单击 Web 视图并单击 “检查” 或使用 Windows 和 Linux 上的 Ctrl + Shift + I 快捷方式或 macOS 上的 Cmd + Option + I 快捷方式来打开 Web 检查器来调试你的应用。

¥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.

开发你的移动应用

¥Developing your Mobile Application

移动开发与桌面开发的工作方式类似,但你必须运行 tauri android devtauri 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.

开发服务器

¥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 (a 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.

:::note 注意

使用 create-tauri-app 创建的项目可为你的移动开发配置开箱即用的开发服务器。

¥Projects created with create-tauri-app configures your development server for mobile dev out of the box.

:::

设备选择

¥Device Selection

默认情况下,移动开发命令会尝试在连接的设备中运行你的应用,并回退到提示你选择要使用的模拟器。要预先定义运行目标,你可以提供设备或模拟器名称作为参数:

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

npm run tauri ios dev 'iPhone 15'

使用 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

:::note 注意

如果你打算在物理 iOS 设备上运行应用,你还必须提供 --host 参数,并且你的开发服务器必须使用 process.env.TAURI_DEV_HOST 值作为主机。请参阅框架的设置指南以获取更多信息。

¥If you intend on running the application on a physical iOS device you must also provide the --host argument and your development server must use the process.env.TAURI_DEV_HOST value as host. See your framework’s setup guide for more information.

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

:::

:::caution 提醒

要使用 Xcode 或 Android Studio,Tauri CLI 进程必须正在运行且不能被终止。建议使用 tauri [android|ios] dev --open 命令并保持进程处于活动状态,直到你关闭 IDE。

¥To use Xcode or Android Studio the Tauri CLI process must be running and cannot be killed. It is recommended to use the tauri [android|ios] dev --open command and keep the process alive until you close the IDE.

:::

打开 Web 检查器

¥Opening the Web Inspector

  • iOS

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

    ¥Safari must be used to access the Web Inspector for your iOS application.

    在 Mac 机器上打开 Safari,在菜单栏中选择 Safari > 设置,单击高级,然后选择显示 Web 开发者的功能。

    ¥Open the Safari on your Mac machine, choose Safari > Settings in the menu bar, click Advanced, then select Show features for web developers.

    如果你在物理设备上运行,则必须在“设置”>“Safari”>“高级”中启用 Web 检查器。

    ¥If you are running on a physical device you must enable Web Inspector in Settings > Safari > Advanced.

    完成所有步骤后,你应该会在 Safari 中看到一个“开发”菜单,你将在其中找到要检查的连接设备和应用。在你的设备或模拟器上选择,然后单击 localhost 以打开 Safari 开发者工具窗口。

    ¥After following all steps you should see a Develop menu in Safari, where you will find the connected devices and applications to inspect. Select on your device or simulator and click on localhost to open the Safari Developer Tools window.

  • Android

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

    ¥The inspector is enabled by default for Android emulators, but you must enable it for physical devices. Connect your Android device to the computer, open the Settings app in the Android device, select About, scroll to Build Number and tap that 7 times. This will enable Developer Mode for your Android device and the Developer Options settings.

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

    ¥To enable application debugging on your device you must enter the Developer Options settings, toggle on the developer options switch and enable USB Debugging.

    Android 版 Web Inspector 由 Google Chrome 的 DevTools 提供支持,可通过在 Chrome 浏览器中导航到 chrome://inspect 来访问。如果你的 Android 应用正在运行,则你的设备或模拟器应出现在远程设备列表中,你可以通过单击设备上的检查来打开开发者工具。

    ¥The Web Inspector for Android is powered by Google Chrome’s DevTools and can be accessed by navigating to chrome://inspect in the Chrome browser. Your device or emulator should appear in the remote devices list if your Android application is running, and you can open the developer tools by clicking inspect on your device.

故障排除

¥Troubleshooting

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

    ¥Error running build script on Xcode

Tauri 通过创建一个构建阶段来挂接到 iOS Xcode 项目中,该构建阶段执行 Tauri CLI 将 Rust 源代码编译为在运行时加载的库。构建阶段在 Xcode 进程上下文中执行,因此可能无法使用 shell 修改(例如 PATH 添加),因此在使用可能不兼容的工具(例如 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 应用时提示网络权限

    ¥Network permission prompt on first iOS app execution

第一次执行 tauri ios dev 时,你可能会看到 iOS 提示你允许查找和连接本地网络上的设备。需要此权限,因为要从 iOS 设备访问你的开发服务器,我们必须将其公开在本地网络中。要在你的设备中运行你的应用,你必须单击“允许”并重新启动你的应用。

¥On the first time you 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, we must expose it in the local network. To run your app in your device you must click Allow and restart your application.

对源代码更改做出反应

¥Reacting to Source Code Changes

与你的 webview 实时反映更改的方式类似,Tauri 会监视你的 Rust 文件中的更改,因此当你修改其中任何一个文件时,你的应用会自动重建并重新启动。

¥Similarly to how your webview reflects changes in real time, Tauri watches your Rust files for changes so when you modify any of them your application is automatically rebuilt and restarted.

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

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

要限制监视更改的文件,你可以在 src-tauri 文件夹中创建一个 .taurignore 文件。此文件的工作方式与常规 Git 忽略文件一样,因此你可以忽略任何文件夹或文件:

¥To restrict the files that are watched for changes you can create a .taurignore file in the src-tauri folder. This file works just like a regular Git ignore file, so you can ignore any folder or file:

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

使用浏览器 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.

源代码控制

¥Source Control

在你的项目存储库中,你应该将 src-tauri/Cargo.locksrc-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号