为什么在`create-react-app`构建中运行index.html不起作用？

Question

我是新手使用 create-react-app。 我想知道为什么在浏览器中打开一个构建的 index.html 文件不起作用？？ 我知道应该使用 serve -s build 来服务于一个构建的项目，但我想知道为什么一个构建的React应用程序不能在没有服务的情况下启动。

我将进一步阐述：

1. create-react-app helloworld
2. 进行代码更改并验证应用程序正常运行。
3. npm run build 或 yarn run build ... 现在我已经创建了带有 index.html 的 ./build 目录。
4. 现在我只需在浏览器中打开 index.html，但它无法工作。

我想了解为什么这不起作用？ 为什么我必须服务于构建后的项目才能让它工作？

- Gaurav51289

---

看看这个答案-最受欢迎的。可能会有帮助 https://dev59.com/OlcP5IYBdhLWcg3wd5um#44371294 - b.p.

我遇到了同样的问题。你是如何解决的？ - myTest532 myTest532

仍然是一个很棒的问题 @Gaurav51289 - undefined

Answer 1

以下是 Reddit 上某个用户在类似主题上的回答：

该项目建立的前提是它托管在服务器根目录下。

要覆盖这一点，请在 package.json 中指定主页。

我并不推荐，但您可以将以下内容添加到 package.json 中，以直接从文件服务器运行它 -

"homepage":"./"

https://www.reddit.com/r/reactjs/comments/5iya27/why_open_up_indexhtml_wont_workcreatereactapp/

此外，您可能希望将应用程序服务于某种类型的服务器，更多信息请参见： https://create-react-app.dev/docs/deployment 和 https://create-react-app.dev/docs/production-build

- Marek Kamiński

---

TL,DR; 在你的 package.json 中添加 "homepage": "."，就可以在本地运行 index.html 了。 - Yasserius

Answer 2

对于使用 react-router-dom 的人，可以使用 <HashRouter> 替代 <BrowserRouter>。代码应该是这样的：

<HashRouter>
  <Switch>
    <Route path="/" exact component={ Main } />
  </Switch>
</HashRouter>

- ChechoCZ

---

谢谢，对我有用。这里提供了关于BrowserRouter和HashRouter之间区别的有用资源。 - Budi Salah

Answer 3

对于react-router应用程序，有一个技巧。只需创建一个路径为“/index.html”的<Route/>并将其连接到适当的组件即可。 <Route exact path="/" component={Home} /> <Route path="/index.html" component={Home} />

- Ankit Topno

---

这对我没用。当我在浏览器中打开index.html时，仍然得到一个空白页面。 - Becks104

我遇到了同样的问题。你是如何解决的？ - myTest532 myTest532