从 create-react-app Public 文件夹中读取 JSON 文件 [重复]答案

【问题标题】：Reading a JSON file from the create-react-app Public folder [duplicate]从 create-react-app Public 文件夹中读取 JSON 文件 [重复]
【发布时间】：2019-12-27 01:54:43
【问题描述】：

我有一个包含以下内容的 ipAddress.json 文件：

{
  "ipAddress": "11.111.111.111"
}

在公共文件夹中，我将该 ipAddress.json 文件放入“ipAddress”文件夹中，因此路径看起来像“public/ipAddress/ipAddress.json”

但我无法读取此文件。我在努力

const ipAddress = (require(process.env.PUBLIC_URL + '/ipAddress/ipAddress.json')).ipAddress;

使用“json-loader”公共库。

如何让它工作？根据 (Using the Public Folder) 它应该可以正常工作。

但我收到此错误：

找不到模块：您尝试导入 /ipAddress/ipAddress.json 它位于项目 src/ 目录之外。相对进口不支持在 src/ 之外。

感谢您的帮助

【问题讨论】：

错误字面上说明了问题所在。您唯一的解决方法可能是将文件放在 src 文件夹中
替代：stackoverflow.com/a/55298684/8076386
当我构建项目时，我需要能够编辑该 ipAddress.json 文件，这就是为什么我想将它放在公用文件夹中但如果我在构建时将它放入 src 文件夹中无法访问该文件
好的会看那个链接谢谢
为什么不调用 fetch 从该文件中获取 json 数据呢？

标签： javascript reactjs react-create-app

【解决方案1】：

如果它只是一个 json 对象，您应该能够使用 const 对象中的数据创建一个 js 文件。然后将 const 导出为模块。

要创建的新 JS 文件：

const ipAddressJson = {
    ipAddress: "11.111.111.111"
};

module.exports = ipAddressJson;

文件里面你想要json对象：

import ipAddressJson from 'path-to-the-js-file-above';

https://codesandbox.io/embed/tender-bash-2hjei

【讨论】：

不幸的是，这不允许您在构建后打开 json 文件以便我可以编辑 IP

【解决方案2】：

为什么不将您的 JSON 文件放入您的项目范围？例如，如果您使用 create-react-app 创建了 react 应用程序，则 src 文件夹将是默认的项目范围。

将您的 JSON 文件放入 src/data 之类的文件夹中，然后：

import data from '../data/somefile.json

【讨论】：

因为现在 JSON 与项目捆绑在一起，每次更改时都需要重新构建。