是否可以通过public文件夹中的create-react-app服务静态文件？

Question

基本上，我为客户端制作了一个（相对）简单的应用程序。该应用程序正常工作，但他们一直在要求更改数据。

鉴于该应用程序最初的预期简单性以及它保存静态数据的事实，我没有将其链接到任何后端。该数据将保存在本地静态文件中，而对象将保存该数据。

问题是，fle被捆绑到了buld中，因此，如果我只想更改一些静态数据而不必进行rbuild，我不会！

我的数据文件可以在公用文件夹中访问，并且可以正常工作。我试图通过js文件实现相同的想法。

我无法从/ src文件夹外部导入。

有什么方法可以从以某种方式添加到构建的静态文件夹访问静态数据？

Answer 1

是的，您可以将资产放置在静态文件夹中。

文件：使用公用资料夹

• 您可以参考的路径index.html有%PUBLIC_URL%/path/resource。
• 您可以process.env.PUBLIC_URL + '/path/resource'在javascript代码中使用。

在最终构建时，将在构建时替换这两种方法。

如果这些是javascript资产，则构建将不会意识到它们。您需要将其构造为外部javascript库，并将其存储在可以在代码中引用的全局变量中。然后您可以将该javascript库加载到您的index.html

Answer 2

假设您想读取包含数据的 json 文件，您可以通过以下方式进行：

class App extends Component {
  async getData() {
    const res = await fetch("/json/sample.json");
    const data = await res.text();
    console.log(data);
    return this.setState({ data });
  }

  componentDidMount() {
    this.getData();
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <div>{this.state.data}</div>
        </header>
      </div>
    );
  }
}

在json公用文件夹中创建文件夹的位置。使用create-react-app. 希望这可以帮助。