Capacitor Filesystem API路径问题：绝对路径读取JSON文件报错求助

你遇到的核心问题是错误使用了本地绝对路径：Capacitor的Filesystem API无法直接访问电脑本地的file://路径。VS Code能通过路径跳转是因为它直接读取本地文件系统，但浏览器（或原生APP运行时）处于沙箱环境，无权访问本地电脑的绝对路径，因此会报错。

下面提供两种适配不同场景的解决方案：

方案一：开发环境直接导入JSON（最简单） #

React支持直接导入JSON文件，无需使用Filesystem API，适合快速开发测试：

import { IonHeader, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';
import { IonPage, IonButton } from '@ionic/react';
// 直接导入同目录的JSON文件
import data from './data.json';

class ReadFileContainer extends React.Component {
  readsecretFile = () => {
    console.log('contents:', data);
    // 导入后的JSON已经是对象，无需额外解析
    console.log('parsed data:', data);
  };

  render() {
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonTitle>This is a test page</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonButton onClick={this.readsecretFile}>Read File</IonButton>
      </IonPage>
    );
  }
}

export default ReadFileContainer;

方案二：用Capacitor Filesystem API适配原生APP #

如果需要打包到iOS/Android原生APP，需将JSON文件放到src/assets目录（Capacitor的标准资源目录），再通过Directory.Assets指定路径：

1. 将data.json移动到src/assets/FileSystem/目录（和你的组件目录对应）
2. 修改代码如下：

import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { IonHeader, IonTitle, IonToolbar } from '@ionic/react';
import React from 'react';
import { IonPage, IonButton } from '@ionic/react';

class ReadFileContainer extends React.Component {
  readsecretFile = async () => {
    try {
      const contents = await Filesystem.readFile({
        // 路径相对于assets目录
        path: 'FileSystem/data.json',
        directory: Directory.Assets,
        encoding: Encoding.UTF8
      });
      console.log('raw contents:', contents.data);
      // 解析JSON字符串为对象
      const jsonData = JSON.parse(contents.data);
      console.log('parsed data:', jsonData);
    } catch (error) {
      console.error('读取文件失败:', error);
    }
  };

  render() {
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonTitle>This is a test page</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonButton onClick={this.readsecretFile}>Read File</IonButton>
      </IonPage>
    );
  }
}

export default ReadFileContainer;

关键注意事项 #

• 绝对不要使用本地绝对路径（file:///Users/...），不同运行环境（Web、iOS、Android）的文件系统结构完全不同，必须依赖Capacitor提供的Directory枚举指定文件位置。
• Web环境下，Capacitor会通过HTTP请求获取Assets目录的文件，确保文件路径和项目打包后的静态资源路径对应。
• 加上try-catch可以捕获读取失败的错误，方便排查问题。

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