2.4 第一个 Tauri 应用：启动窗口、页面加载、开发调试

当你用脚手架工具创建好 Tauri 项目后，实际上已经获得了一个可以立即运行的桌面应用骨架。本章节会带你走过从“启动一个空窗口”到“在前端页面中显示内容并开启开发调试”的完整流程。

1. 初始化项目

如果你还没有创建项目，可以在终端中执行以下命令（以 Tauri v2 为例）：

npm create tauri-app@latest

按照提示选择前端框架（如 React、Vue、Svelte 或纯 JavaScript），工具会自动生成前端部分和 src-tauri 目录。创建完成后进入项目：

cd your-app-name
npm install

2. 理解项目关键文件

项目结构中最需要关注的是：

前端页面：通常是 src/App.jsx、index.html 等，负责 UI 展示。
Tauri 配置：src-tauri/tauri.conf.json，这里定义了窗口行为、应用 ID、权限等。
Rust 入口：src-tauri/src/main.rs，这是应用启动的 Rust 端代码，负责创建 WebView 窗口并加载前端页面。

让我们快速看一下 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");
}

tauri::Builder 会读取 tauri.conf.json 中的窗口配置，然后创建对应的原生窗口。

3. 启动窗口并加载页面

窗口配置全部集中在 tauri.conf.json 的 app.windows 数组里。默认配置可能类似：

{
  "app": {
    "windows": [
      {
        "title": "My Tauri App",
        "width": 800,
        "height": 600,
        "resizable": true,
        "url": "index.html"
      }
    ]
  }
}

title：窗口标题；
width / height：初始尺寸；
url：要加载的前端入口，相对于前端构建输出目录（通常是 ../dist）。开发模式下 Tauri dev server 会自动寻找 localhost:1420 之类的地址。

直接运行开发命令：

npm run tauri dev

你会看到：

Rust 后端被编译，启动 WebView 窗口；
前端开发服务器（通常是 Vite）在后台启动；
一个漂亮的桌面窗口凭空出现，里面渲染的就是你的前端页面。

4. 开发调试

Tauri 为开发调试提供了两种必备工具：

4.1 浏览器开发者工具

在开发模式下运行的 Tauri 窗口中，你可以像调试普通网页一样打开 DevTools：

Windows / Linux：右键窗口空白处 → 检查元素，或者按 Ctrl+Shift+I。
macOS：Cmd+Option+I。

你会看到 Elements、Console、Network 等完整面板，方便调试前端 HTML/CSS/JS 问题。这是因为底层就是系统的 WebView，它本身自带完整的调试功能。

4.2 Rust 后端日志

Tauri 支持使用 Rust 的 log 宏打印信息，并可以在终端看到。在 main.rs 中加入：

fn main() {
    tauri::Builder::default()
        .setup(|_app| {
            // 仅在开发模式下启用日志
            #[cfg(debug_assertions)]
            {
                let _ = _app.get_window("main").unwrap().open_devtools();
            }
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error");
}

你也可以在 Rust 端使用 println! 或 log::info!，这些输出会显示在启动终端里。如果想更高级的调试，可以插件 tauri-plugin-log，把日志显示在前端或写入文件。

4.3 热更新

在 tauri dev 模式下，无论是前端代码还是 Rust 代码发生修改：

前端改动：Vite/HMR 会自动刷新 WebView 页面，秒级生效。
Rust 改动：Tauri 会自动重新编译 Rust 模块并重启应用，虽然比前端慢，但改动后端逻辑后很快就能看到效果。

5. 常见问题排查

窗口一片空白：检查 tauri.conf.json 中 app.windows[0].url 是否正确。开发模式默认是 http://localhost:1420，需确保前端开发服务器已启动。
npm run tauri dev 报错：确保已安装 Rust 和 Tauri CLI。执行 rustup update 和 cargo install tauri-cli --version "^2" 进行修复。
Windows 上窗口打不开：确保系统安装了 WebView2 运行时。如果是 Windows 10/11，一般已内置；如果是 N 版或精简版系统，需要手动下载。

总结：第一个 Tauri 应用的启动流程就是“配置窗口 → 写前端页面 → 运行一条命令”。你不需要手动操作 WebView，也不需要写繁复的窗口管理代码，一切都由 Tauri 帮你对接好，只需专注于用 Web 技术做出高质量的界面即可。