如何在没有服务器的情况下运行 React 应用程序答案

【问题标题】：How to run the react app without a server如何在没有服务器的情况下运行 React 应用程序
【发布时间】：2019-07-25 18:35:58
【问题描述】：

我使用 npx create-react-app my-app https://github.com/facebook/create-react-app 创建了项目。

当运行 npm run build 我得到以下信息：

70.28 KB 构建\静态\js\2.93539f7c.chunk.js 22.82 KB 构建\静态\css\main.cfe0ffe9.chunk.css 1.41 KB (+44 B) build\static\js\main.79f4d9a1.chunk.js 761 B build\static\js\runtime~main.fdfcfda2.js

该项目是在假设它托管在服务器根目录的情况下构建的。你可以使用 package.json 中的主页字段来控制它。为了例如，添加这个来为 GitHub Pages 构建它：

看来我需要有服务器才能运行该应用程序。

是否可以在不运行任何服务器的情况下在本地运行它？我的意思是因为它只是 html、css、js，为什么这里需要服务器？目的是什么？

另外build文件夹里面生成了很多文件，还有一个index.html，一个静态文件夹，所以不像一个bundle.js和一个index.html，看起来比较复杂。

任何人都可以解释为什么构建文件夹是这么多文件？以及运行应用程序时要考虑哪一个？

谢谢

【问题讨论】：

使用npm start。
我的意思是我想使用生产模式，所以所有文件都优化了，npm start 将启动开发模式。
视情况而定，如果你想访问文件相对你需要一个服务器。
@RajendrakumarVankadari 我不确定我是否理解你，相对访问文件是什么意思？你能更具体一点吗？我也可以在没有任何服务器的情况下运行 html、css 和 js 吗？
是的，你需要一个网络服务器来发布一个网站。

标签： javascript reactjs

【解决方案1】：

是否可以在不运行任何服务器的情况下在本地运行它？

没有

我的意思是因为它只是 html、css、js，为什么这里需要一个服务器？目的是什么？

React 使用 XHR 加载内容，无法向文件方案 URL 发出请求。

谁能解释一下为什么build文件夹有这么多文件？

React 利用代码分块来优化加载哪些数据。这意味着没有立即使用的 JS 可以稍后加载，并且不会影响初始页面加载和首次渲染之间的时间。

【讨论】：

【解决方案2】：

默认情况下，假设您的应用托管在服务器根目录下，Create React App 会生成一个构建。要覆盖它，请在 package.json 中指定主页，例如：

"homepage": "http://mywebsite.com/relativepath"

这将使 Create React App 正确推断要在生成的 HTML 文件中使用的根路径。

来源：https://create-react-app.dev/docs/deployment/#building-for-relative-paths

所以你应该将你的主页指定为当前路径：

"homepage": "./"

【讨论】：