Create-React-App 在 WHM/cPanel 服务器上显示空白页

Question

我正在尝试将 React 应用程序部署到生产环境中，但似乎我运行遇到了一个问题，我无法通过目前研究过的任何在线答案来解决。

我用一个简单的 login/register 系统创建了一个应用程序，并使用 redux+saga 来实现。

我运行之后：

npm run-script build

我收到一条消息，例如构建文件夹已准备好部署（目前一切正常）。在我将文件上传到 cPanel 中的 'public_html' 文件夹后，我得到一个空白页面，其中包含 React App 作为标题并加载了图标。

到目前为止我已经尝试解决这个问题：

将主页设置为“.”在 package.json（运气不好，正在检查网络选项卡显示所有文件都以 200 状态加载，OK)
更新到我的依赖项的最新版本
安装了 node 并尝试 'serve' 构建（我真的不明白这部分）

此外，我在控制台中有一个错误（可能与网络应用程序完全无关，因为我在配置中有 redux 开发工具，所以没有显示任何内容）：

控制台日志错误：

我非常想找到解决这个问题的办法。感谢您的贡献和时间。

store.js:

import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router'
import createSagaMiddleware from 'redux-saga';

import rootReducer from './index';
import rootSaga from './sagas';

const defaultState = {};

export const history = createBrowserHistory()

const sagaMiddleware = createSagaMiddleware()

const store = createStore(
  rootReducer(history),
  defaultState,
  compose(
    applyMiddleware(
      routerMiddleware(history),
      sagaMiddleware
    ),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

sagaMiddleware.run(rootSaga);

export default store;

Answer 1

问题出在撰写功能上。对于开发，它可以工作，但对于生产模式，您需要删除 devtools。

尝试不同的开发和生产组合方法。下面给出了示例代码片段。

const devTools = process.env.NODE_ENV === 'development' ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() : null

const store = createStore(
  rootReducer,
  compose(applyMiddleware(thunk), devTools)
)

你也可以尝试库'redux-devtools-extension'来编写。

Create-React-App 在 WHM/cPanel 服务器上显示空白页

Create-React-App shows blank page on WHM/cPanel server

javascript

reactjs

react-router

browser-history

redux-saga