时间戳

首页 > 解决方案 > create-react-app 静态站点 - 读取 JSON 文件

javascript - create-react-app 静态站点 - 读取 JSON 文件

问题描述

我会先说我是 React 的新手，所以希望有一个我刚刚错过的简单答案。

简而言之，我想构建一个无需任何网络服务器即可运行的页面。我已经配置好了所有东西，所以我可以打开 index.html 并且它运行良好。

然而，问题是我想要一个可以在项目构建后编辑的 data.json 文件（本质上是一个配置文件），所以我不能将它粘贴到 /src 文件夹中，因为它都被捆绑了。

数据.json

{
  "timeout": 10,
  "threshold": 50
}

从“反应”导入反应；

const App = () => {      
  const path = process.env.PUBLIC_URL + '/data/data.json';
  fetch(path)
  .then((res) => res.text())
  .then((json) => {
    const data = JSON.parse(json);
  })

  return (
   ...
  );
}

这在 VSCode 中运行时可能会正常工作，但在单独运行 index.html 页面时会引发 CORS 错误。我也知道我不能直接在 /public 中引用 a 文件，因为它位于 /src 文件夹之外：

import data from '../Public/data/data.json';

如何在 /Build 中有一个可以从 React 读取的可配置文件，而不会遇到 CORS 问题。

希望这个问题有意义

谢谢

标签： javascriptreactjswebpack

解决方案

无需预先添加 PUBLIC_URL 环境变量。

这应该工作

fetch('/data/data.json')

推荐阅读