MERN 堆栈 webapp 显示空白屏幕 Android-移动浏览器，作为 React-Redux 前端，Node-Express 后端

Question

我已经使用 MongoDB、Express、React、Nodejs 在 MERN 堆栈中构建了 WebApp。

的身份将其托管到 Heroku-Cloud 项目的

Github-repo- Find_Geeks。它适用于我的桌面浏览器，但不能运行任何 Android chrome.

我在 Heroku 云中有一个自动构建的应用程序，在 package.json 中使用命令作为

"scripts:{ "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend" } 当它在 android 上加载时，它的搜索栏背景变为黑色，我假设页面当时已加载，但无法显示组件。

桌面截图-chrome，处于工作状态。

桌面截图-chrome，隐身模式，工作状态。

chrome 中的移动模式屏幕截图，工作状态。

我的package.json内容是

{
  "name": "find-geeks",
  "version": "1.0.0",
  "description": "social media for developers, quite same as Linkedin.",
  "main": "server.js",
  "scripts": {
    "client-install": "npm install --prefix frontend",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm run server\" \"npm run client  \"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ganesh-deshmukh/connect-geeks.git"
  },
  "author": "Ganesh Ashok Deshmukh",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ganesh-deshmukh/connect-geeks/issues"
  },
  "homepage": "https://github.com/ganesh-deshmukh/connect-geeks#readme",
  "dependencies": {
    "bcryptjs": "2.4.3",
    "body-parser": "1.18.2",
    "concurrently": "3.5.1",
    "express": "4.16.3",
    "gravatar": "1.6.0",
    "jsonwebtoken": "8.2.0",
    "mongoose": "5.4.0",
    "passport": "0.4.0",
    "passport-jwt": "4.0.0",
    "validator": "9.4.1"
  },
  "devDependencies": {
    "nodemon": "1.17.3"
  }
}

编辑 1：

我尝试通过本地主机服务器在移动屏幕上进行调试，地址为 url http://192.168.43.171:3000/,

然后它显示错误位置为，

从 store.js 中删除了 DevTools，现在它可以通过 localhost-server 在移动浏览器上运行。

可能是由于 Heroku 构建脚本或任何其他原因。

它在删除 redux-dev-tools 后就可以在移动屏幕上运行，就像在本地一样。

但它不适用于 URL，因为 https://connectgeeks.herokuapp.com

Answer 1

这道题没有任何错误，但错误是在更改完成后没有推送 Heroku master。

我检查了 Heroku 仪表板上的日志，它在旧日期显示 activity，尽管我更新并推送了 git-repo。

我的错误是在删除 redux-dev-tools 后没有推送 Heroku-repo。

解决后，在activity选项卡中，显示新日志，表示已更新。

它现在可以在移动设备上运行，通过 localhost-server 和 url 作为 https://connect-geeks.herokuapp.com/

Answer 2

我知道这是一个老问题，但我会 post 回答以防万一有人需要它。

问题出在您的 server.js（后端）文件中。中间件需要按如下顺序放入server.js

order of the middlewares

MERN 堆栈 webapp 显示空白屏幕 Android-移动浏览器，作为 React-Redux 前端，Node-Express 后端

MERN stack webapp showing blank screen Android-mobile browser, as React-Redux frontend, Node-Express backend

node.js

reactjs

redux

redux-devtools

react-redux