为什么 React Webpack 生产版本显示空白页面？

Question

我正在构建一个反应应用程序，目前webpack-dev-server 工作正常（hello world 文本出现），但 webpack -p 显示空白页。对于生产版本 chrome 开发工具下的网络选项卡显示 index.html 和 index_bundle.js 的大小为 0 B（见图） 但显然情况并非如此 HTML 文件大小为 227 B & index_bundle.js 文件大小为195Kb（见图）

Chrome Devtools Elements Tab 也显示如下（见图）

我的 webpack 配置文件如下所示：

Answer 1

变化

import {BrowserRouter as Router} from 'react-router-dom'

到：

import {HashRouter as Router} from 'react-router-dom'

在 App.js 中帮助我解决了我的 create-react-app 项目中的相同问题。

Answer 2

我有一个独特的解决方案 - 只有一个页面没有为我运行。所以我只是检查了控制台日志并发现了错误。由于某种原因，该错误仅显示“react-scripts-build”，而不是“react-scripts-start”。

这导致了一个空白页

Answer 3

这些都不适合我我的错误是因为我混淆了文件夹

解决方案：

npm run build

我的 apache 配置：

没用

DocumentRoot /var/www/sites/example.com/client/public/

工作（构建文件夹不公开）

DocumentRoot /var/www/sites/example.com/client/build/

Answer 4

<BrowserRouter basename="/calendar" />
<Link to="/today"/> // renders <a href="/calendar/today">

基本名称：字符串
所有位置的基本 URL。如果您的应用程序是从服务器上的子目录提供的，您需要将其设置为子目录。格式正确的基本名称应该有一个前导斜杠，但没有尾随斜杠。

Answer 5

GitHub Pages 不支持在底层使用 HTML5 pushState 历史 API 的路由器（例如，使用 browserHistory 的 React 路由器）。这是因为当 http://user.github.io/todomvc/todos/42 之类的 URL 重新加载页面时，其中 /todos/42 是前端路由，GitHub Pages 服务器返回 404，因为它对 /todos/42 一无所知。如果您想将路由器添加到托管在 GitHub Pages 上的项目，这里有几个解决方案：

• 您可以从使用 HTML5 历史 API 切换到使用哈希路由。 如果你使用 React Router，你可以切换到hashHistory 来实现这个效果，但是 URL 会更长更冗长（例如，http://user.github.io/todomvc/#/todos/42?_k=yknaj）。 Read more 关于 React Router 中不同的历史实现。
• 或者，您可以使用一个技巧来教 GitHub Pages 通过使用特殊的重定向参数重定向到您的 index.html 页面来处理 404。在部署项目之前，您需要将带有重定向代码的404.html 文件添加到build 文件夹，并且您需要将处理重定向参数的代码添加到index.html。你可以在in this guide找到这个技术的详细解释。

Answer 6

使用

import { HashRouter } from 'react-router-dom';

而不是

import { BrowserRouter} from 'react-router-dom';

别忘了在你的路由代码中替换它

<HashRouter>
  ...
</HashRouter>

Answer 7

我想通了，我在使用 browserHistory 时没有设置本地服务器。如果我将其更改为 hashHistory 它就可以了。要使用 react-router 浏览器历史记录在本地测试 webpack 生产，我需要这样做配置服务器：

您的服务器必须准备好处理真实的 URL。当应用程序第一次在 / 加载时，它可能会工作，但是当用户四处导航然后在 /accounts/23 处点击刷新时，您的 Web 服务器将收到对 /accounts/23 的请求。您将需要它来处理该 URL 并将您的 JavaScript 应用程序包含在响应中。

快递应用可能如下所示：

const express = require('express')
const path = require('path')
const port = process.env.PORT || 8080
const app = express()

// serve static assets normally
app.use(express.static(__dirname + '/public'))

// handle every other route with index.html, which will contain
// a script tag to your application's JavaScript file(s).
app.get('*', function (request, response){
  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))
})

app.listen(port)
console.log("server started on port " + port)

如果有人使用带有浏览器历史记录的 react-router 部署到 firebase，请执行以下操作：

{
  "firebase": "<YOUR-FIREBASE-APP>",
  "public": "<YOUR-PUBLIC-DIRECTORY>",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}