为什么不在浏览器上运行React生成版本？
我正在尝试使用react的构建工具构建我的反应应用程序.当我尝试"npm start"时,应用程序运行正常.
npm start
在http:// localhost:3000 =>我可以访问该应用程序.
但是当我构建应用程序并尝试访问构建文件夹中的"index.html"文件时,它不起作用,我遇到了一个白色的空白屏幕.
npm run build
http://myreact-app/build/index.html =>白色空白屏幕.
这是在运行npm run build之后创建的构建文件夹.
这是index.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 Web服务器上构建的index.html文件？
小智 23
可能你还没注意到,但我不认为你的html文件能够正确导入css和脚本文件.当我查看您的文件结构时,我看到有关构建的所有内容都在构建文件夹下.但是在你的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>
<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>
- 为什么要添加斜杠,任何正确的方法来避免它们？ (4认同)
- 浏览器中的网络控制台应该是最先检查的地方之一.文件加载错误可能存在. (3认同)
Tec*_*era 19
要解决此问题，请转到您的build文件夹，然后您将看到manifest.json文件，打开它，您将看到manifest.json：
"start_url": ".",
将其更改为
"start_url": "/",
有解决问题的替代方法：
在您的 React 项目构建转到您的package.json文件并homepage使用.值或您的站点基本 url指定属性之前，请参见示例：
{
....
"homepage": ".",
......
}
- 添加 `"homepage": "."` 对我有用。我可以在index.html 文件中看到它在所有链接前面加上了“.”前缀。这正是我遇到的问题，谢谢！ (3认同)
小智 13
https://github.com/facebookincubator/create-react-app/issues/1487
如果添加-“ homepage”：“。”，可以解决上述问题。
在您的package.json中。这不是官方的，但值得遵循。
- 在链接一些参考资料时，您可以发布一些有用的内容，例如帖子中最重要的部分，这样您的答案就会更有价值... (2认同)
- 在此处添加更新的链接：https://facebook.github.io/create-react-app/docs/deployment#serving-the-same-build-from-different-paths (2认同)
如果以上都不起作用。也许问题是您正在使用react-router-dom并且路由需要一个特殊的编译，htmls为您的router配置中存在的每个页面生成单独的编译。
参考： 我正在使用 create-react-app，我需要直接在浏览器中打开 build/index.html，无需服务器
总之，您需要使用路由的包装器来<HashRouter>代替。例如：<Router><Switch>
<Switch>
<Route exact path='/' component={WelcomePage} />
<Route exact path='/game' component={GamePage} />
</Switch>
考虑一下您的路线将更改为：
http://localhost:3000/#/ -> Root page
http://localhost:3000/#/game -> Other page
您应该尝试使用此处的服务包来运行单页应用程序。
npm install -g serve全局安装serve help查看帮助文本serve --single build提供单页应用程序。我的服务器将启动，您可以从中访问您的反应应用程序
| 归档时间： |
|
| 查看次数： |
26669 次 |
| 最近记录： |