【问题标题】:Deployment of react app with express server gives blank screen but the app works fine with serve -s build使用快速服务器部署反应应用程序会出现空白屏幕,但该应用程序与 serve -s build 一起工作正常
【发布时间】:2020-12-17 17:29:12
【问题描述】:

我在 localhost:8080 上运行 express 服务器。 API 工作正常。 我在 express server 源中添加了一个名为 public 的新文件夹,并在该文件夹中添加了 react 项目源。

我添加了 homepage:"." 但没有结果。该应用程序适用于从 App 根目录构建的 serve -s,但不适用于 express 服务器!


import { Router, Request, Response } from 'express';
import { V1_Router } from './v1';
import path from 'path';

export const Routes = Router();

Routes
    .use('/v1/', V1_Router)
    .get('/*', async (_req: Request, res: Response) => {
        res.sendFile(path.resolve('../public/build/index.html'));
    });

我检查了控制台没有错误!所有 Javascript 和 CSS 文件都已完全加载,只是由于某种原因无法运行,请帮助我...

【问题讨论】:

    标签: node.js reactjs express


    【解决方案1】:

    改成这样的

    const express = require('express');
    const path = require('path');
    const app = express();
    
    app.use(express.static(path.join(__dirname, 'public')));
    
    app.get('/', function (req, res) {
      res.sendFile(path.join(__dirname, 'public', 'build', 'index.html'));
    });
    
    app.listen(process.env.PORT || 8080);
    

    EDIT1

    app.use(express.static(path.join(__dirname, "..", "build")));
    app.use(express.static("public"));
    
    app.use((req, res, next) => {
      res.sendFile(path.join(__dirname, "..", "build", "index.html"));
    });
    

    【讨论】:

    • 嗨兄弟,这不是问题。我的代码在一个子目录下,正如我提到的 Express 服务器工作正常,我可以访问 API 和应用程序,但应用程序是空白的。
    • 正如我之前提到的,所有脚本都加载在 Chrome 浏览器网络选项卡中。只是捆绑 Javascript 没有运行!
    • 保持为空!!
    • 您是否在代码中添加了静态文件夹public
    • 我还添加了代理 "proxy": "localhost:8080"
    猜你喜欢
    • 2019-04-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-12-18
    相关资源
    最近更新 更多