使用 create-react-app 构建后如何修复白屏？
Posted
技术标签:
【中文标题】使用 create-react-app 构建后如何修复白屏？【英文标题】：How to fix the white screen after build with create-react-app? 【发布时间】：2019-09-26 23:36:46 【问题描述】：我使用了 react-router-dom 并构建了我的 react-app。当我在服务器上部署它时，我得到一个空白页面，控制台是空的。
我的 App.js 是：
import React, Component from 'react';
import Route, Switch, BrowserRouter from 'react-router-dom';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
class App extends Component
render()
return (
<div>
<BrowserRouter basename="/">
<Switch>
<Route exact path="/" component=Agenda />
<Route path="/planning" component=Planning />
</Switch>
</BrowserRouter>
</div>
);
export default App;
我的 index.js 是：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>
, document.getElementById('root'));
我的 index.html ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<title>Test</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
</body>
</html>
在我的 package.json 中，我有：
"homepage": "."
当我将 homepage 更改为 https://dev.test.com/Reactand
当我运行它时，我得到一个空白页面，例如我部署的地址：https://dev.test.com/React/ 它不公开。当我运行serve-s build 时，控制台上出现一个空白屏幕，我得到：
我在生产中的 index.html 是：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
<meta name="theme-color" content="#000000"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
<link rel="manifest" href="manifest.json">
<link rel="data" href="data.json">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<title>Test</title>
<link href="/React/static/css/2.2aa93811.chunk.css" rel="stylesheet">
<link href="/React/static/css/main.ca6e1d23.chunk.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
<script>!function(f)function e(e)for(var r,t,n=e[0],o=e[1],u=e[2],l=0,a=[];l<n.length;l++)t=n[l],c[t]&&a.push(c[t][0]),c[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(f[r]=o[r]);for(s&&s(e);a.length;)a.shift()();return p.push.apply(p,u||[]),i()function i()for(var e,r=0;r<p.length;r++)for(var t=p[r],n=!0,o=1;o<t.length;o++)var u=t[o];0!==c[u]&&(n=!1)n&&(p.splice(r--,1),e=l(l.s=t[0]))return evar t=,c=1:0,p=[];function l(e)if(t[e])return t[e].exports;var r=t[e]=i:e,l:!1,exports:;return f[e].call(r.exports,r,r.exports,l),r.l=!0,r.exportsl.m=f,l.c=t,l.d=function(e,r,t)l.o(e,r)||Object.defineProperty(e,r,enumerable:!0,get:t),l.r=function(e)"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,value:"Module"),Object.defineProperty(e,"__esModule",value:!0),l.t=function(r,e)if(1&e&&(r=l(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",enumerable:!0,value:r),2&e&&"string"!=typeof r)for(var n in r)l.d(t,n,function(e)return r[e].bind(null,n));return t,l.n=function(e)var r=e&&e.__esModule?function()return e.default:function()return e;return l.d(r,"a",r),r,l.o=function(e,r)return Object.prototype.hasOwnProperty.call(e,r),l.p="/ReactCalendar/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;i()([])</script>
<script src="/React/static/js/2.4a7f0704.chunk.js"></script>
<script src="/React/static/js/main.f9268394.chunk.js"></script>
</body>
</html>
我该如何解决？
【问题讨论】：
/React 是您服务器上的目录吗？您还可以提供从您的生产版本编译的index.html 吗？
@Rallen 是的 /React 是我服务器上的一个目录，你能看看我的帖子吗？我在生产中添加了编译的index.html。当我在我的服务器上运行它时，控制台是空的。
【参考方案1】：
尝试将BrowserRouter 上的basename="/" 更改为basename="/React"。 react-router 在子目录中使用时需要这个。
来自react-router docs：
basename：所有位置的基本 URL。如果您的应用程序是从服务器上的子目录提供的，您需要将其设置为子目录。格式正确的基本名称应该有一个前导斜杠，但没有尾随斜杠。
还将package.json 中的homepage 更改为您的生产目标的网址。 homepage="." 意味着它将在它位于服务器根目录中的每个域上工作（也是默认行为）。
来自React docs regarding deployment：
默认情况下，假设您的应用托管在服务器根目录下，Create React App 会生成一个构建。 要覆盖它，请在 package.json 中指定主页，例如：
"homepage": "http://mywebsite.com/relativepath",这将使 Create React App 正确推断要在生成的 HTML 文件中使用的根路径。
【讨论】：
首页将是"homepage":"." 或"homepage":"https://dev.test.com/React" ?
嗨！你能分享一下你结束使用的主页吗？我一直在尝试很多变化。是否需要http 或https？ relativepath 应该去哪里？
我必须使用我域的确切 BASE URL 而不是 '.'在“主页”中，因为它没有显示图像。除此之外，这种方法很有效，谢谢！【参考方案2】：
我遇到了同样的问题并解决了！
如果有人仍有此问题，请按照以下步骤操作。
1 - 您需要更新您的浏览器。参考这个，https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers
2- 您需要使用 npm i react-router-dom 将 "react-router-dom": 依赖项添加到您的 package.json 文件中
3- 将"homepage": ".", 添加到您的 package.json 文件中
希望这会有所帮助。
【讨论】：
只添加 "homepage": ".", 到你的 package.json 文件中【参考方案3】：我也有这个问题，白屏，没有错误。这些答案都没有解决我的问题。 我将把我的问题的解决方案留在这里，这样像我这样的其他人就不会在一个小错误上花费 2 个小时。
只需确保将/build 文件夹中的所有文件上传到服务器即可。
【讨论】：
我也这样做了！我的问题仍然存在。我刚刚将所有文件从构建文件夹上传到 s3。当我加载我的 S3 时，它显示空白屏幕并且没有错误。【参考方案4】：像这样重新排列对我有用，删除确切吗？从根路径
<Router>
<Route exact path="/about" component=About />
<Route path="/" component=App />
</Router>
【讨论】：
我使用了 hompage="."在我的 package.json 中，但 '/about' 不会进入相对路径【参考方案5】：只是添加一个额外的答案，因为我知道这有很多原因。我在构建后遇到了一个白页，并在浏览器控制台中看到了一个 404 的 Web 块。我在 package.json 中设置了“主页”，很困惑。
服务器端缓存
但是，我在 404 消息中注意到，被引用的块 与我的构建文件夹中的哈希值不同；这些“旧”块试图被获取，而不是来自文件名中具有不同哈希值的最新版本的新块。
例如，我的浏览器控制台中的 404 错误指向一个带有类似哈希的块：
main.f1d2d060.chunk.css // from an old build
^^^^^^^^^
在/build 文件夹中，块实际上是：
main.adg25e108.chunk.css // from latest build
^^^^^^^^^
因此，我意识到必须缓存某些文件以尝试检索旧文件而不是新文件。原来我启用了服务器端缓存，并且旧的网络块正试图通过asset-manifest.json的缓存版本检索... :sigh: ...我能够刷新我的网络主机 (SiteGround) 的缓存。
刷新缓存会因您的主机而异：https://www.siteground.com/kb/clear-site-cache/
如果您尝试了其他所有方法，则需要考虑一些事项 - 双重和三重检查控制台中 404 中的哈希字符串是否与 /build 文件夹中的哈希字符串匹配，否则您可能会遇到与旧资产清单相同的情况.json 试图检索错误的东西。
【讨论】：
【参考方案6】：我遇到了这个问题。我试图在构建后通过双击 index.html 打开应用程序，但也没有工作，我得到了空白页面，但如果构建的文件在服务器环境中运行，则可以工作。 https://create-react-app.dev/docs/deployment/
【讨论】：
【参考方案7】：我只是在我的 index.html 上添加basename='/index.html'，更多信息请参见下面的代码：
import React from 'react';
import BrowserRouter as Router, Route, Switch from 'react-router-dom';
import LoginPage from './components/LoginPage/LoginPage';
import Dashboard from './components/Dashboard/Dashboard';
function App()
return (
<Router basename='/index.html'>
<Switch>
<Route path='/' exact component=LoginPage />
<Route path='/dashboard' component=Dashboard/>
</Switch>
</Router>
);
export default App;
希望对您有所帮助。
【讨论】：
【参考方案8】：对我有用的是将 basename="/index.html" 添加到 BrowserRouter ：
<BrowserRouter basename="/index.html">
...
</BrowserRouter>
【讨论】：
有多少不同的答案真是一场灾难。他们似乎都帮助了某人。这个帮了我！我在 Linux 上运行 nginx。【参考方案9】：以上答案都不适合我。所以我尝试在不同的端口上运行它，它可以工作。
serve -s build -l 4000
【讨论】：
【参考方案10】：我遇到了同样的“白屏”问题，只需添加以下内容即可解决：
<BrowserRouter basename="/">
basename="/" 在 index.js 文件中。
对我有用，希望对你有用。
【讨论】：
【参考方案11】：这可能是由于您重命名了其路线的页面。
我有一个没有显示错误的白屏，因为我使用history.push 将用户发送到我们重命名的页面。
该页面已不存在，因此显示为空白屏幕。
【讨论】：
【参考方案12】：react-router-dom v6 有这个问题，对我有用的是用 <HashRouter> 替换 <BrowserRouter> 并在 package.json 中添加 "homepage": "."
【讨论】：
以上是关于使用 create-react-app 构建后如何修复白屏？的主要内容，如果未能解决你的问题，请参考以下文章
使用 create-react-app 和 Typescript 时如何在构建时加载 .md 文件？
运行 create-react-app 构建脚本时如何设置构建 .env 变量？