Javascript 是否可以使用公共文件夹中的 create-react-app 提供静态文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53014651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to serve Static files with create-react-app from public folder?
提问by xunux
Basically I made a (relatively) simple app for a client. The app works and all but they keep asking for changes to the data.
基本上我为客户制作了一个（相对）简单的应用程序。该应用程序工作正常，但他们一直要求更改数据。
Given the originally anticipated simplicity of the app and the fact it held static data, i did not link it to any back end.ll the data lives in a local static file with an object holding the data.
鉴于应用程序最初预期的简单性以及它保存静态数据的事实，我没有将它链接到任何后端。数据位于本地静态文件中，对象保存数据。
The problem is that fle gets bundled into the buld, so if i want to just change some static data without having to rbuild, i can't!
问题是 fle 被捆绑到 buld 中，所以如果我只想更改一些静态数据而不必 rbuild，我不能！
I have assets that my data file can access inside the public folder, and those are working fine. I was trying to achieve the same idea with a js file.
我的数据文件可以在公共文件夹中访问资产，并且这些资产运行良好。我试图用一个 js 文件来实现同样的想法。
I canot import from outside the /src folder.
我无法从 /src 文件夹外部导入。
Is there a way i can access static data from the static folder that gets added on build somehow?
有没有办法可以从以某种方式添加到构建中的静态文件夹中访问静态数据？
回答by Steve Buzonas
Yes, you can place assets in the static folder.
是的，您可以将资产放置在静态文件夹中。
- You can reference the path in
index.htmlwith%PUBLIC_URL%/path/resource. - You can use
process.env.PUBLIC_URL + '/path/resource'in javascript code.
- 您可以
index.html使用%PUBLIC_URL%/path/resource. - 您可以
process.env.PUBLIC_URL + '/path/resource'在 javascript 代码中使用。
Both of these approaches are replaced at build time for your final build.
这两种方法在最终构建的构建时都会被替换。
If these are javascript assets, the build will not be aware of them. You need to structure it as an external javascript library and store them in a global variable that you can reference within your code. Then you can load that javascript library in your index.html
如果这些是 javascript 资产，构建将不会意识到它们。您需要将其构建为外部 javascript 库并将它们存储在您可以在代码中引用的全局变量中。然后你可以在你的index.html
回答by jsbisht
Say you wanna read json file containing data, you could do it in the following way:
假设您想读取包含数据的 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>
);
}
}
Where the jsonfolder is created inside public folder. Anything that you put within public folder is served automatically when using create-react-app. Hope this helps.
在json公用文件夹中创建文件夹的位置。使用create-react-app. 希望这可以帮助。
