如何使用Tauri & Reactjs在users/appdata/my-app-name中创建存储文件？

核心逻辑说明 #

你引入的 BaseDirectory 和 createDir 是 Tauri 文件系统 API 的核心工具：BaseDirectory.AppData 对应系统的 AppData 目录（Windows 下路径为 C:\Users\<你的用户名>\AppData\Roaming），我们可以基于这个根路径创建自定义的 my-app-name 目录，再完成文件的创建与写入操作。

具体实现代码 #

1. 创建目标目录 #

先确保 my-app-name 目录存在，用 createDir 结合指定的基础目录：

import { BaseDirectory, createDir, writeTextFile } from "@tauri-apps/api/fs";

// 创建my-app-name目录
const createAppDir = async () => {
  try {
    // 第一个参数是相对于BaseDirectory.AppData的子目录名
    // recursive: true 确保父目录不存在时自动创建（这里AppData本身存在，可选但更健壮）
    await createDir('my-app-name', { dir: BaseDirectory.AppData, recursive: true });
    console.log('目录创建成功');
  } catch (err) {
    console.error('目录创建失败:', err);
  }
};

2. 在目标目录下创建并写入文件 #

目录就绪后，使用 writeTextFile 创建文件并写入内容：

const writeFileToAppDir = async () => {
  try {
    // 路径为相对于AppData的 my-app-name/test.txt
    await writeTextFile('my-app-name/test.txt', '这是测试内容', { dir: BaseDirectory.AppData });
    console.log('文件创建并写入成功');
  } catch (err) {
    console.error('文件操作失败:', err);
  }
};

3. 在 React 组件中调用 #

可以在事件回调或组件生命周期中触发操作，比如按钮点击：

import React from 'react';
import { BaseDirectory, createDir, writeTextFile } from "@tauri-apps/api/fs";

function App() {
  const handleSetup = async () => {
    await createAppDir();
    await writeFileToAppDir();
  };

  return (
    <div className="App">
      <button onClick={handleSetup}>创建目录和文件</button>
    </div>
  );
}

export default App;

关键配置注意 #

必须在 tauri.conf.json 中开启对应文件系统权限，避免操作被拦截：

{
  "tauri": {
    "allowlist": {
      "fs": {
        "createDir": true,
        "writeFile": true,
        "scope": ["$APPDATA/my-app-name/**"]
      }
    }
  }
}

scope 字段限定了操作的路径范围，既保证功能正常，也符合安全规范。

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