在Tauri（Rust+React+TS）中创建多窗口的问题求助

1. 检查窗口的文件路径配置 #

后端创建窗口时，必须确保指定的url指向正确的前端页面路径，开发/生产环境路径逻辑不同：

• 开发环境：指向Vite等开发服务器的对应路由
• 生产环境：指向打包后的静态文件路径

示例Rust命令代码：

use tauri::{command, WindowManager, WindowUrl};

#[command]
async fn open_settings_window(window: WindowManager) -> Result<(), String> {
    let url = if cfg!(debug_assertions) {
        // 开发环境指向dev server的settings路由
        WindowUrl::External("http://localhost:5173/settings".parse().unwrap())
    } else {
        // 生产环境指向打包后的静态页面
        WindowUrl::App("settings.html".into())
    };

    WindowBuilder::new(&window, "settings", url)
        .title("设置")
        .build()
        .map_err(|e| e.to_string())?;

    Ok(())
}

2. 适配React路由配置 #

如果使用React Router，建议改用HashRouter适配Tauri本地文件加载场景，避免路径解析错误：

// src/App.tsx
import { HashRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Settings from "./pages/Settings";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </HashRouter>
  );
}

3. 排查资源加载错误 #

创建窗口时添加加载回调，同时打开开发者工具查看控制台报错：

• 窗口内按Ctrl+Shift+I打开开发者工具，检查控制台的404、JS语法等错误
• Rust侧添加加载日志：

WindowBuilder::new(&window, "settings", url)
    .title("设置")
    .on_web_resource_loaded(|event| {
        if let Some(error) = event.response().error() {
            println!("资源加载失败: {}", error);
        }
    })
    .build()
    .map_err(|e| e.to_string())?;

4. 验证tauri.conf.json配置 #

确保窗口权限和打包路径配置正确：

{
  "tauri": {
    "allowlist": {
      "window": {
        "create": true,
        "show": true
      }
    },
    "build": {
      "distDir": "../dist",
      "devPath": "http://localhost:5173"
    }
  }
}

5. 生产环境打包验证 #

先执行npm run build完成前端打包，确认dist目录下生成了settings.html（或对应路由的静态文件），再运行cargo run --release测试生产环境窗口加载。

内容的提问来源于stack exchange，提问作者Cat100