Ionic 3中保存JSON值到本地JSON文件报错求助

嘿，这个问题我之前做Ionic项目时也踩过坑，咱们来快速理清问题所在～

错误原因分析 #

你代码里用的路径src/assets/data/是项目源码中的相对路径，但Ionic的File插件在运行时（不管是模拟器还是真机）根本识别不了这个路径：

• 首先，src/assets目录在应用打包后会被嵌入到应用的只读资源目录里，本身就不支持写入操作；
• 其次，File插件只认它自己定义的应用可写目录常量，这类路径才是符合插件要求的合法URI。

修复方案 #

我们需要把目标路径换成Ionic File插件提供的可写目录，比如：

• this.file.dataDirectory：应用的私有数据目录，只有当前应用能访问，适合存储应用内部数据；
• this.file.documentsDirectory：系统文档目录（部分平台用户可直接访问），适合存储需要用户导出的文件。

下面是修改后的完整代码示例：

fileName: string = "tickets.json";

saveTickets(obj: any) {
  // 选择应用私有可写目录
  const baseDir = this.file.dataDirectory;
  // 要创建的子目录名称
  const subDir = 'data';

  // 先确保子目录存在（如果不存在则自动创建）
  return this.file.createDir(baseDir, subDir, true)
    .then(() => {
      // 拼接完整的子目录路径，写入文件
      return this.file.writeFile(`${baseDir}${subDir}/`, this.fileName, JSON.stringify(obj), { replace: true });
    })
    .catch(error => {
      console.error('保存文件出错:', error);
      throw error;
    });
}

额外注意点 #

• 如果你原本想修改源码里的src/assets/data/tickets.json，那File插件做不到——因为运行时应用是打包后的独立环境，无法直接修改项目源码文件。这种场景下，开发阶段可以用Node.js的fs模块，但不能在设备上运行。
• 代码里的{replace: true}表示如果文件已存在就覆盖，如果你想避免覆盖，保持{replace: false}的话，记得先判断文件是否存在，否则会抛出文件已存在的错误。

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