首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >当通过快捷服务时,Index.html不呈现组件

问当通过快捷服务时,Index.html不呈现组件
EN

Stack Overflow用户
提问于 2019-10-12 07:01:19
回答 1查看 1.8K关注 0票数 2

我在下面这个教程的末尾,https://www.freecodecamp.org/news/how-to-deploy-a-react-app-with-an-express-server-on-heroku-32244fe5a250/

我已经将我的App.js更改为:

代码语言:javascript
复制
import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <p>lmfao</p>
      </div>
    );
  }
}

export default App;

现在,不幸的是,在访问localhost:5000之后,运行"npm dev",虽然页面标题是'React‘,页面源是index.html,但是App组件没有呈现,任何地方都没有错误。

这里有一张访问本地主机的图片:5000,它提供了index.html

​

有趣的是,如果我访问localhost上的React服务器:3000,组件就会呈现。

我遗漏了什么?非常感谢

P.S .这里是Server.js

代码语言:javascript
复制
const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 5000;

// Static file declaration
app.use(express.static(path.join(__dirname, "client/build")));

// production mode
if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "client/build")));
  //  app.get('*', (req, res) => {    res.sendfile(path.join(__dirname = 'client/build/index.html'));  })
}

// build mode
app.get("*", (req, res) => {
  res.sendFile(path.join(__dirname, "/client/public/index.html"));
});

// start server
app.listen(port, (req, res) => {
  console.log(`server listening on port: ${port}`);
});

下面是package.json中的依赖项:

代码语言:javascript
复制
"devDependencies": {
    "eslint": "^6.5.1",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-flowtype": "^4.3.0",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^2.1.2",
    "eslint-plugin-standard": "^4.0.1"
  },
  "dependencies": {
    "concurrently": "^5.0.0",
    "express": "^4.17.1",
    "react-router-dom": "^5.1.2"
  }

编辑:根据请求,以下是该项目的github链接:https://github.com/Dobermensch/ExpressTest.git您必须为ExpressTest文件夹和客户端子文件夹执行npm安装

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-12 08:25:17

您获得空白页的最可能原因是无法下载脚本包。

在浏览器中,右键单击空白页,并选择“查看页面源”或类似菜单。您将看到.html文件的内容,包括指向/some-path/some-name.js文件的<script>标记。不能下载所有或部分这些文件。要确认这种情况,只需通过将浏览器指向localhost:5000/some-path/some-name.js手动下载包即可。如果无法下载脚本包,则添加到Express的路由。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58351709

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档