reactjs 为什么React生产构建不能在浏览器上运行？

jk9hmnmh 于 2023-01-08 发布在 React

关注(0)|答案(9)|浏览(202)

我尝试用react的编译工具来编译我的react应用程序，当我尝试“npm start”时，应用程序运行良好。

npm start

在http://localhost:3000 =〉上，我可以访问应用程序。

但是，当我构建应用程序并尝试访问构建文件夹中的“index.html”文件时，它不起作用，我遇到了一个白色的空白屏幕。

npm run build

http://myreact-app/build/index.html =〉白色空白屏幕。
这是在运行npm run build之后创建的build文件夹。

这是索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="/manifest.json">
    <link rel="shortcut icon" href="/favicon.ico">
    <title>React App</title>
    <link href="/static/css/main.9a0fe4f1.css" rel="stylesheet">
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript> 
    <div id="root"></div>
    <script type="text/javascript" src="/static/js/main.46d8cd76.js"></script>
  </body>
</html>

我做错了什么吗？我不能访问Apache服务器上的index.html文件吗？

reactjs

来源：https://stackoverflow.com/questions/44371052/why-wont-react-production-build-run-on-the-browser

9条答案

按热度按时间

7rfyedvj1#

也许你还没有注意到，我认为你的html文件不能正确导入css和脚本文件。当我查看你的文件结构时，我发现所有关于build的文件都在build文件夹下。但是在你的html文件中，文件路径前面有斜线（“/”）。这就是为什么浏览器在“build”的父文件下查找这些文件的原因。试着删除斜线。

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
      <meta name="theme-color" content="#000000">
      <link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico">
      <title>React App</title>
      <style></style>
      <link href="static/css/main.65027555.css" rel="stylesheet">
    </head>
    <body
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <script type="text/javascript" src="static/js/main.316f1156.js"></script>
    </body>
</html>

赞(0）回复(0）举报 2023-01-08

goucqfw62#

以上问题可以通过添加

"homepage":".",

在你的package.json中。这不是官方的，但是一个很好的黑客可以遵循。
https://github.com/facebookincubator/create-react-app/issues/1487

赞(0）回复(0）举报 2023-01-08

0vvn1miw3#

要解决此问题，请转到您的build文件夹，然后您将看到manifest.json文件，打开它，您将看到您的manifest.json具有：

"start_url": ".",

更改为

"start_url": "/",

存在解决该问题的替代方法：
在你的react项目构建之前，转到你的package.json文件，并使用.值或可能使用你的站点基本url指定homepage属性，参见示例：

{
   ....
   "homepage": ".",
   ......
}

赞(0）回复(0）举报 2023-01-08

crcmnpdw4#

你应该尝试使用服务包here来运行单页应用程序。

要全局安装的npm install -g serve
serve help以查看帮助文本
serve --single build以提供单页应用程序。I服务器将启动，您可以从该服务器访问react应用程序

赞(0）回复(0）举报 2023-01-08

3gtaxfhh5#

如果以上都不起作用，可能问题是你使用的是react-router-dom，路径需要一个特殊的编译，为router配置中存在的每个页面生成单独的htmls。
参考：I'm using create-react-app and I need to open build/index.html in browser directly without a server
总之，您需要使用<HashRouter>而不是<Router>，并使用<Switch> Package 器来 Package 路由。例如：

<Switch>
  <Route exact path='/' component={WelcomePage} />
  <Route exact path='/game' component={GamePage} />
</Switch>

考虑您的路线将更改为：

http://localhost:3000/#/ -> Root page
http://localhost:3000/#/game -> Other page

赞(0）回复(0）举报 2023-01-08

oiopk7p56#

您需要安装本地服务器插件/扩展。
如果你是vscode用户，那么搜索live服务器扩展并安装它。然后在你的编辑器底部会有“Go live”选项。
对于其他编辑器用户（atom/sublime），搜索live服务器插件。

赞(0）回复(0）举报 2023-01-08

jjhzyzn07#

有时候内容没有被提供的原因是因为“serve -s”命令是在build目录之外执行的，正确的方法是进入build目录，然后在其中执行“serve -s”。

赞(0）回复(0）举报 2023-01-08

bpzcxfmw8#

我在webroot中有一个index.php，它阻止了我的应用程序运行index.html。

赞(0）回复(0）举报 2023-01-08

gg0vcinb9#

我使用HashRouter代替BrowserRouter&还需要在每个URL前面添加**/#**，如下所示：

href={`/#/blogs/${slug}`}

这个对我有用，谢谢

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs 为什么React生产构建不能在浏览器上运行？

9条答案

相关问题

热门标签

最新问答