Question

我用MLab，React，Redux开发了MERN应用程序。 在开发环境中运行正常。我在Heroku中进行了部署，并且在我用于开发的Chrome中运行正常（带有React，Redux附件）。

问题：它在我的计算机上的任何其他浏览器中都显示为空白，包括在任何其他计算机中的chrome中。我在网上浏览了此论坛中的一个解决方案，并在server.js（或app.js）上进行了以下操作。也就是说，在我自己的Chrome浏览器中，此URL（https://servicexpoc.herokuapp.com/）可以正常工作，但在其他任何情况下，它都是空白页。

if (process.env.NODE_ENV === 'production') {
        // app.use(express.static('client/build')); returns blank page
        // Changed to ...
        app.use('/static', express.static(path.join(__dirname, 'client/build')));
        app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
      });
    }

使用传统的... git东西（git add，commit），然后检查到Heroku的远程连接，并执行“ git push heroku master”。一切正常...服务器已启动并正在运行。再一次，它出现在我的镶边中，像魅力一样起作用……但是没有其他地方。

以下是我的服务器端package.json：

    {
      "name": "appname",
      "version": "1.0.0",
      "description": "Developer Connection social media",
      "main": "server.js",
      "scripts": {
      "client-install": "npm install --prefix client",
      "start": "node server.js",
      "server": "nodemon server.js",
      "client": "npm start -prefix client",
      "dev": "concurrently \"npm run server\" \"npm run client\"",
      "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix 
 client && npm run build --prefix client"
  },
      "author": "Jit <sarbojit.project@gmail.com>",
      "license": "ISC",
      "dependencies": {
      "bcryptjs": "^2.4.3",
      "body-parser": "^1.18.3",
      "concurrently": "^3.6.0",
      "express": "^4.16.3",
      "gravatar": "^1.6.0",
      "jsonwebtoken": "^8.3.0",
      "mongoose": "^5.1.5",
      "passport": "^0.4.0",
      "passport-jwt": "^4.0.0",
      "validator": "^10.3.0"
     }
}

以下是客户端package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  "axios": "^0.18.0",
  "classnames": "^2.2.6",
  "jwt-decode": "^2.2.0",
  "moment": "^2.22.2",
  "react": "^16.4.1",
  "react-dom": "^16.4.1",
  "react-moment": "^0.7.7",
  "react-redux": "^5.0.7",
  "react-router-dom": "^4.3.1",
  "react-scripts": "1.1.4",
  "redux": "^4.0.0",
  "redux-thunk": "^2.3.0"
 },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
 },
 "proxy": "http://localhost:5000"
}

我的目录结构：

appName
  client
    public 
      ... index.html (that is the root of react)
    src
      ... this has all the react code
  package.json (client side)
....... SERVER SIDE  
server.js
models  
   ... all models here
routers
   ... all routers here
validations
   ... all validations here
package.json   (SERVER SIDE)
.gitignore

尝试遵循以下指示： https://expressjs.com/en/starter/static-files.html

任何帮助...

Answer 1

为了渲染Heroku，如果您碰巧在chrome中附加了REDUX DEVTOOLS进行开发，请执行以下操作：

const store = createStore（ rootReducer， initialState，撰写（ applyMiddleware（... middleware）， //窗口。 REDUX_DEVTOOLS_EXTENSION &&窗口。 REDUX_DEVTOOLS_EXTENSION （） //检查下一个thig是否有效窗口。 REDUX_DEVTOOLS_EXTENSION ？窗口。 REDUX_DEVTOOLS_EXTENSION （）：f => f ））;

最初，我强迫Chrome添加DEVTOOL（如上所述，现在已注释为三元）。 Heroku在构建时并没有忽略它，也没有创建错误甚至警告。它只是没有渲染（空白）。在上述情况下，这将呈现您的页面。

Heroku上的MERN不适用于所有浏览器

1 个答案: