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

Question

我正在尝试将React应用程序部署到生产环境中，看来我遇到了一个我无法解决的问题，到目前为止我研究的任何在线答案都无法解决。

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

我跑步后：

npm run-script build

我收到一条消息，例如已经可以部署build文件夹（到目前为止一切正常）。将文件上传到cPanel中的“ public_html”文件夹后，我得到一个空白页面，其中有React App作为标题和图标加载。

到目前为止，我已尝试解决此问题：

1. 将首页设置为“。”在package.json中（不走运，请检查网络 标签显示所有文件的加载状态均为200，确定）
2. 更新到我的依赖项的最新版本
3. 安装了节点并尝试“提供”构建服务（我真的不理解这一部分）

此外，我在控制台中出现错误（可能与Web应用程序完全无关，因为我在配置中使用了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 ”进行构建。