如何解决Tauri中window未定义及window.__TAURI_IPC__不是函数的问题

问题原因 #

你遇到的window.__TAURI_IPC__ is not a function和window is not defined错误，本质是代码未在Tauri的WebView环境中执行，或者调用Tauri API的时机过早：

• 直接在普通浏览器中访问React开发服务（比如http://localhost:1420），Tauri不会注入IPC接口；
• 组件初始化阶段就调用Tauri API，此时Tauri的全局对象还未完成注入；
• 服务端渲染（SSR）场景下，window对象不存在。

解决方案 #

1. 确保在Tauri环境中启动应用 #

不要单独启动React的dev服务，必须通过Tauri命令启动：

npm run tauri dev

只有通过Tauri启动的WebView才会自动注入window.__TAURI_IPC__等Tauri全局对象。

2. 调整API调用时机并增加环境判断 #

在React组件中，使用useEffect确保组件挂载后再调用Tauri API，同时用isTauri判断当前是否在Tauri环境中，避免非Tauri场景报错：

import { useEffect, useState } from 'react';
import { getTauriVersion } from "@tauri-apps/api/app";
import { isTauri } from "@tauri-apps/api/core";

function App() {
  const [tauriVersion, setTauriVersion] = useState('');

  useEffect(() => {
    const fetchVersion = async () => {
      // 先确认当前是Tauri环境
      if (await isTauri()) {
        try {
          const version = await getTauriVersion();
          setTauriVersion(version);
        } catch (err) {
          console.error('获取Tauri版本失败:', err);
        }
      }
    };

    fetchVersion();
  }, []);

  return (
    <div>
      {tauriVersion ? `Tauri版本: ${tauriVersion}` : '当前非Tauri运行环境'}
    </div>
  );
}

export default App;

3. 核对依赖版本（可选） #

你的@tauri-apps/api和@tauri-apps/cli版本差异不大（1.1.0 vs 1.1.1），一般不会有兼容问题，但建议保持两者版本一致，避免潜在问题：

"@tauri-apps/api": "^1.1.1",
"@tauri-apps/cli": "^1.1.1"

4. 确认配置正确性 #

你的tauri.conf.json配置已经开启allowList.all: true和withGlobalTauri: true，这两项配置是正确的，无需修改。

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