使用Tauri 1.2+Rust+React+TS创建新窗口遇内容显示及关闭问题

一、修复窗口空白问题 #

Tauri的WindowUrl::App()不能直接指向.tsx源文件——React组件需要编译后才能被Tauri加载，以下是两种通用解决方案：

方案1：用React Router管理路由（推荐） #

1. 在React项目中配置路由，比如在App.tsx中添加路由规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Settings from './Settings';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<button onClick={() => invoke('open_settings_window')}>SETTINGS</button>} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Router>
  );
}

2. 修改Rust中的窗口路径为路由地址：

#[tauri::command]
fn open_settings_window(app: AppHandle) -> Result<(), String> {
    let result = WindowBuilder::new(&app, "settings", WindowUrl::App("/settings".into()))
        .fullscreen(false)
        .resizable(true)
        .title("Settings")
        .center()
        .build();
    // 原match逻辑保持不变
}

方案2：打包单独的Settings HTML文件（无路由场景） #

如果不需要路由，需在构建工具中配置多入口生成独立的settings.html：

1. 修改vite.config.ts添加多入口配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        main: './index.html',
        settings: './src/Settings.html' // 需手动创建该HTML文件，引入对应组件脚本
      }
    }
  }
});

2. 新建src/Settings.html（结构参考主入口HTML），引入编译后的Settings组件。
3. Rust中修改路径为WindowUrl::App("settings.html".into())。

二、修复窗口无法关闭问题 #

在新窗口的Settings.tsx组件中，直接调用Tauri窗口API实现关闭：

import { window } from '@tauri-apps/api/window';

export default function Settings() {
  return (
    <div style={{ padding: '20px' }}>
      <h1>Settings</h1>
      <button onClick={() => window.close()}>Close Window</button>
    </div>
  );
}

确保已安装依赖：

npm install @tauri-apps/api

额外检查项 #

• 确认tauri.conf.json的build配置正确指向React打包目录：

{
  "build": {
    "distDir": "../dist",
    "devPath": "http://localhost:5173"
  }
}

• 开发模式下，确保Vite开发服务器处于运行状态。

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