Tauri里怎么调用原生API获取系统信息？

Zz姿言提问于 2026-03-03 22:01:22 阅读 5

框架

我刚用Tauri搭了个React桌面应用，想在界面上显示当前操作系统版本，但不知道怎么从前端调用Tauri的原生API。官方文档看了有点懵，试了下直接import好像不行。

比如我想用os.version()这个接口，但控制台报错说os is not defined。是不是要先注册什么插件？还是导入方式不对？

import { useState, useEffect } from 'react';

function App() {
  const [osVersion, setOsVersion] = useState('');

  useEffect(() => {
    // 这里直接调用会报错
    const version = os.version();
    setOsVersion(version);
  }, []);

  return <div>系统版本：{osVersion}</div>;
}

Tauri 桌面应用

我来解答赞 2 收藏

反馈

1 条解答

文雅酱~ Lv1

这个报错很典型，说明你还在用 Node.js 或者纯网页开发的思维去想 Tauri。Tauri 的前端环境其实就是一个浏览器环境，它本身是没有 os 这个全局对象的，也没法像 Node 那样直接 import os from 'os'。你想获取系统信息，得走 Tauri 专门为你搭的那座桥，也就是 @tauri-apps/api 这个包。

原理是这样，Tauri 把后端 Rust 的能力封装好，通过 IPC（进程间通信）暴露给了前端。你不需要自己写 Rust 代码，只需要安装并导入对应的 JavaScript 模块就行了。

我们分三步来解决这个问题。

第一步，确保你的项目里安装了 API 包。如果你是用脚手架搭的项目，通常默认就装好了，如果没有，你需要运行一下 npm install @tauri-apps/api。

第二步，修改你的 React 代码。你需要从 @tauri-apps/api/os 里把 version 这个函数解构出来，然后注意，这是一个异步操作，因为它要去和原生后端通信，所以返回的是 Promise。

这是修改后的代码示例，你可以直接替换你原来的 App 组件：

import { useState, useEffect } from 'react';

// 注意这里：必须从 @tauri-apps/api/os 导入，而不是直接用 os

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



function App() {

  const [osVersion, setOsVersion] = useState('');

  const [loading, setLoading] = useState(true);



  useEffect(() => {

    const fetchOsVersion = async () => {

      try {

        // 调用 Tauri 提供的 API，它是一个 Promise

        const ver = await version();

        setOsVersion(ver);

      } catch (error) {

        console.error('获取系统版本失败，是不是忘记配置权限了？', error);

        setOsVersion('未知版本');

      } finally {

        setLoading(false);

      }

    };



    fetchOsVersion();

  }, []);



  if (loading) {

    return 正在获取系统信息...
;

  }



  return 系统版本：{osVersion}
;

}



export default App;

第三步，也是新手最容易忽略的一步，检查配置文件。Tauri 为了安全，默认是禁止前端随意调用原生 API 的，你得在配置文件里把权限打开。

如果你用的是 Tauri v1 版本，去打开 src-tauri/tauri.conf.json 文件，找到 allowlist 这一项（如果叫 tauri.allowlist 也可能），确保里面有 os 的配置，并且把 all 设为 true，或者至少把 version 设为 true。配置大概长这样：

{

  "tauri": {

    "allowlist": {

      "os": {

        "all": true,

        "version": true

      }

    }

  }

}

如果你用的是最新的 Tauri v2，配置逻辑变了，变成了基于 Capabilities（能力）的配置。你需要去 src-tauri/capabilities 目录下找到对应的 json 文件（通常是 default.json），在 allowed 列表里加上 os:allow-version。

{

  "identifier": "default-capability",

  "windows": ["main"],

  "permissions": [

    "os:allow-version"

  ]

}

改完配置记得重启一下开发环境，npm run tauri dev。这样操作之后，你应该就能在界面上看到正确的系统版本号了。写 Tauri 应用最头疼的就是这些细碎的配置，漏一个字母都不行，习惯了就好。

2026-03-04 11:10