时间戳

首页 > 解决方案 > Create-React-App 在 WHM/cPanel 服务器上显示空白页面

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

问题描述

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

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

我运行后：

npm run-script build

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

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

  1. 将主页设置为“。” 在 package.json 中（不走运，检查网络选项卡显示所有文件都以 200 状态加载，OK）
  2. 更新到我的依赖项的最新版本
  3. 安装节点并尝试“服务”构建（我真的不明白这部分）

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

控制台日志错误：

在此处输入图像描述

我非常渴望找到解决方案。感谢您的贡献和时间。

商店.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;

标签： javascriptreactjsreact-routerbrowser-historyredux-saga

解决方案

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

尝试不同的 compose 方法进行开发和生产。下面给出的示例代码片段。

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 ”来编写。

推荐阅读