javascript - Heroku React App 显示数据库的 json 而不是 UI？

问题描述

我在 Heroku 上部署了一个 React 应用程序，它在构建中没有显示任何错误，并且“heroku logs”命令也没有显示任何错误，但是我的页面显示了我的 mongo 数据库的 json 而不是带有 css 的 UI 和反应成分。

该网站在本地运行完美。此外，我尝试了 Heroku 页面的故障排除指南，包括在 package.json 中指定正确的 npm + 节点版本并将 node_modules 添加到 .gitignore。

页面html

<html>
  <head></head>
  <body>
    <pre style="word-wrap: break-word; white-space: pre-wrap;">==$0
      "[{"items":[{"_id":"5c73504f75c5630017b5fba0","task":"TODO 
      1","done":true,"__v":0},{"_id":"5c73514875c5630017b5fba3","task":"TODO 
      2","done":false,"__v":2}]}]"
    </pre>
  </body>
</html>

页面控制台错误

Uncaught (in promise) TypeError: Cannot read property 'honeyTipsAutopopOn' of undefined
    at h1-main.js:formatted:1478
    at k (h1-vendors-honeypay-main-popover.js:1)
    at Generator._invoke (h1-vendors-honeypay-main-popover.js:1)
    at Generator.e.<computed> [as next] (h1-vendors-honeypay-main-popover.js:1)
    at r (h1-main.js:formatted:1501)
    at h1-main.js:formatted:1508

包.json

{
  "name": "todolist",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": {
    "concurrently": "^4.1.0",
    "express": "^4.16.4",
    "mongoose": "^5.4.14",
    "node": "^10.16.0",
    "npm": "^6.9.0"
  },
  "devDependencies": {},
  "scripts": {
    "client-install": "npm install --prefix client",
    "start": "node app.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run start\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix 
    client && npm run build --prefix client"
  },

应用程序.js

const express = require("express");
const mongoose = require("mongoose");
mongoose.set("useFindAndModify", false);
const bodyParser = require("body-parser");
const items = require("./routes/api/itemRoutes");
const path = require("path");

const app = express();
app.use(bodyParser.json());
//mongoose.connect("mongodb://localhost/todolist", {useNewUrlParser: true});
mongoose.connect("...", {useNewUrlParser: true});
let port = process.env.PORT || 4000;
app.use("/", items);

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));

  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

app.listen(port, () => {console.log("Server started on port " + port);});

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>BriansTodos</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

我应该尝试解决此问题吗？谢谢。

标签： javascripthtmlreactjsheroku

javascript - Heroku React App 显示数据库的 json 而不是 UI？

问题描述

解决方案

推荐阅读