Question

基本上，我为客户端制作了一个（相对）简单的应用程序。该应用程序正常运行，但所有其他用户都在不断要求更改数据。

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

问题在于，fle捆绑在了桶中，因此，如果我只想更改一些静态数据而不必进行rbuild，我就不能！

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

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

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

Answer 1

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

Docs: Using the Public Folder

您可以使用index.html来引用%PUBLIC_URL%/path/resource中的路径。
您可以在JavaScript代码中使用process.env.PUBLIC_URL + '/path/resource'。

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

如果这些是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" />
        </header>
      </div>
    );
  }
}

在公用文件夹中创建json文件夹的位置。使用create-react-app时，将自动提供您放在公用文件夹中的所有内容。希望这会有所帮助。

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

2 个答案: