使用Tauri 2.x+React时invoke函数未识别的问题排查

你遇到的问题源于Tauri 2.x对API结构的拆分调整，结合你的项目配置和代码，可按以下步骤排查解决：

1. 使用正确的导入路径 #

Tauri 2.x将invoke等核心API移至@tauri-apps/api/tauri子模块，根模块不再导出该方法。修改你的导入语句：

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

2. 匹配TypeScript模块配置 #

你的项目已设置"type": "module"，需确保tsconfig.json的模块解析配置正确，避免类型查找失败：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "target": "ES2020",
    "skipLibCheck": true // 可选，跳过库类型检查避免冲突
  }
}

3. 清理依赖缓存并重装 #

依赖缓存可能残留旧的类型定义，执行以下命令重置依赖：

rm -rf node_modules package-lock.json
npm install

4. 必须在Tauri环境中运行 #

invoke仅能在Tauri应用的运行时环境生效，不能通过普通浏览器预览（如vite preview或vite dev）测试，必须使用npm run tauri dev启动应用。

5. 可选：添加环境判断避免浏览器报错 #

为防止非Tauri环境下执行代码报错，可增加环境判断：

if (window.__TAURI__) {
  invoke('greet', { name: 'World' })
    .then(res => console.log(res))
    .catch(err => console.error('调用失败:', err));
}

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