个人中心
gpt4 book ai didi

node.js - 服务器上的 Express 静态文件加载不正确但 React 前端加载正确？

转载 作者：搜寻专家 更新时间：2023-10-31 23:44:31 25 4
gpt4 key购买 nike

我有一个使用 Node/Express 服务于我的服务器的 ReactJS 项目。在我的前端 (React) 服务端口 3312，在我的服务器上它服务端口 (5000)。当我通过端口 3312 加载我的前端时，一切看起来都很好，我的 react 路由器路由工作正常。 (我的 api 的工作一切都很棒)。但是，当我尝试提供静态文件并查看我是否通过我的服务器(端口 5000)获得相同的结果时，我只能在我的页面上看到样式。 (我有背景颜色)我没有看到静态文件应该提供的任何 html？

当我查看 localhost:5000 时，我在控制台中没有发现任何错误。但是，我的 css 样式在页面上正确显示(因为我的 body 上设置了背景颜色)。但是，我看不到任何显示 html 代码的前端 React。我进入了我的 index.html 文件，并在根 div 中进行了一个简单的测试，它正在显示，但我不明白为什么我的 React 代码没有显示在我的服务器上。

我很可能认为问题出在 express 静态文件不服务于我的图像或 React Router 代码。我还应该注意，我没有使用 create-react-app 我正在使用 webpack dev server react no cli。

此外，我没有使用 create-react-app 我没有使用自定义 webpack 的 cli。

这是我的代码:

( Node 服务器)

const express = require("express");
const path = require("path");
const router = express.Router();

const app = express();
const port = 5000;

// Serve static files on server
app.use("/public", express.static(__dirname + "/../public"));

app.get("*", function(request, response) {
  response.sendFile(path.join(__dirname + "/../public/index.html"));
});

if (app.get("env") === "development") {
  app.listen(port, () => {
    console.log(`Server started on port ${port}`);
  });
} else {
  app.listen(port, "171.33.4.126", () => {
    console.log(`Server started on port ${port}`);
  });
}

routes.js

import React from "react";

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import HomePage from "./components/homepage";
import AboutPage from "./components/aboutpage";
import Contactpage from "./components/contactpage";

export default (
  <Router>
    <div>
      <Switch>
        <Route exact path="/" component={Landingpage} />
        <Route exact path="/about" component={AboutPage} />
        <Route exact path="/contact" component={Contactpage} />
      </Switch>
    </div>
  </Router>
);

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Routes from "./routes";

ReactDOM.render(<div>{Routes}</div>, document.getElementById("root"));

index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link
      href="/public/assets/css/styles.css"
      rel="stylesheet"
      type="text/css"
    />
    <title>Site</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

Webpack配置开发

const webpack = require("webpack");
const path = require("path");
// const HtmlWebPackPlugin = require("html-webpack-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = {
  devServer: {
    historyApiFallback: true,
    port: 3312,
    proxy: {
      "/api": "http://localhost:5000"
    }
  },
  entry: ["babel-polyfill", __dirname + "/src/index.js"],
  output: {
    path: path.join(__dirname, "/public"),
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          query: {
            presets: ["react", "env", "stage-0"]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      }
    ]
  },
  plugins: [
    // new HtmlWebPackPlugin({
    //   template: "./public/index.html"
    // }),
    new BrowserSyncPlugin({
      host: "localhost",
      port: 3312,
      files: [
        "./public/*.html",
        "./public/assets/scss/*.scss",
        "./public/assets/variables/*.scss",
        "./public/assets/mixins/*.scss",
        "./public/assets/reset/*.scss"
      ],
      proxy: "http://localhost:3312/"
    })
  ]
};

这是我的文件夹结构的屏幕截图:

enter image description here

控制台网络状态截图:

enter image description here

最佳答案

你的 react 代码没有显示因为index.html不包括它。是public/bundle.js你的转译 react 代码？如果是这样，将以下行添加到 index.html , 在 <div id="root"></div> 之后:

<script src="/public/bundle.js"></script>

如果不是，则将src指向的路径改成正确的。

您可以很好地看到您的 css 样式，因为您已经在 index.html 中包含了这些样式.

更新:基于您的 webpack 配置的几点:

  • 将运行 webpack-dev-server 的端口更改为 3000。您还必须更改 BrowserSyncPlugin对 http://localhost:3000/ 的代理.然后您可以转到 localhost:3312在您的浏览器中，请求将被代理到运行在端口 3000 上的 webpack-dev-server。

  • 如果我错了请纠正我，但你还没有发布你的 index.html完整地。我猜你已经一行看起来像<script src="/bundle.js"></script>某处 .html文件——根据您的最新评论，它似乎是由 HtmlWebPackPlugin 添加的. webpack-dev-server 正在服务 bundle.js通过/ , publicPath你在 webpack 的 output 中指定了选项。只要您通过 localhost:3312 访问您的站点，这就可以正常工作或 localhost:3000 .但是，您在端口 5000 上运行的 express.js 服务器不知道 webpack-dev-server 正在服务 bundle.js在 / ;因此，当您转到 localhost:5000 时，您最终看不到任何反应代码。 .至于样式，您已经通过 /public/assets/css 正确地提供了它们。 ，express.js 服务器可以理解，因为您已在这一行中指定了它:app.use("/public", express.static(__dirname + "/../public")) .解决方案是更改行 <script src="/bundle.js"></script>在你的.html归档到:

    <script src="http://localhost:3312/bundle.js"></script>

    此外，在 webpack 的输出选项中，更改 publicPath至 http://localhost:3312/ .现在，只要你有 webpack-dev-server 运行(使用 BrowserSyncPlugin )，你就可以访问您的站点在 localhost:5000和你的 bundle.js文件应该是服务很好。

尝试以下操作:

Webpack 配置

module.exports = {
    devServer: {
        contentBase: path.join(__dirname, "/public"),
        historyApiFallback: true,
        port: 3000,
        proxy: {
            "/api": "http://localhost:5000"
        }
    },
    entry: ["babel-polyfill", __dirname + "/src/index.js"],
    output: {
        path: path.join(__dirname, "/public"),
        filename: "bundle.js",
        publicPath: "http://localhost:3312/"
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    query: {
                        presets: ["react", "env", "stage-0"]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "sass-loader" }
                ]
            }
        ]
    },
    plugins: [
        new BrowserSyncPlugin({
            host: "localhost",
            port: 3312,
            files: [
                "./public/*.html",
                "./public/assets/scss/*.scss",
                "./public/assets/variables/*.scss",
                "./public/assets/mixins/*.scss",
                "./public/assets/reset/*.scss"
            ],
            proxy: "http://localhost:3000/"
        })
    ]
};

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <link
            href="/assets/css/styles.css"
            rel="stylesheet"
            type="text/css"
        />
        <title>Site</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="http://localhost:3312/bundle.js"></script>
    </body>
</html>

关于node.js - 服务器上的 Express 静态文件加载不正确但 React 前端加载正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53770611/

25 4 0
文章推荐： PHP Jabber : if I login and check messages and disconnect, 在其他用户端我将显示为断开连接
文章推荐： ios - 动画太快了。似乎不能放慢脚步
文章推荐： ios - 无法将类型 'NSTaggedPointerString' 的值转换为 'NSArray'
文章推荐： php - 在 PHP 中生成任意长度的有序(加权)组合
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com