0

我使用 MLab、React、Redux 开发了 MERN 应用程序。在 dev 中工作正常。我在 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' 。一切都很好......服务器已经启动并且正在晒太阳。再一次，它出现在我的 chrome 中并且像魅力一样工作......但没有其他地方。

以下是我的服务器端 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

任何帮助...

4

1 回答 1

0

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

const store = createStore( rootReducer, initialState, compose( applyMiddleware(...middleware), //window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION () // 检查下一个是否有效window.REDUX_DEVTOOLS_EXTENSION ? window.REDUX_DEVTOOLS_EXTENSION () : f = > f));

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

于 2018-07-10T23:39:34.943 回答