时间戳

首页 > 解决方案 > 服务器上的 Express 静态文件未正确加载，但 React 前端加载正确？

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

问题描述

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

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

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

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

这是我的代码：

（节点服务器）

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}`);
  });
}

路由.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"));

索引.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/"
    })
  ]
};

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

在此处输入图像描述

控制台网络状态截图：

在此处输入图像描述

标签： node.jsreactjsexpressreact-router

解决方案

您的反应代码没有显示，因为index.html不包括它。你public/bundle.js转译的反应代码？如果是这样，将以下行添加到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通过你在 webpack 的选项/中指定的。只要您通过或访问您的网站，此方法就可以正常工作。但是，在端口 5000 上运行的 express.js 服务器不知道 webpack-dev-server 正在服务于; 因此，当您转到. 至于样式，您已经通过publicPathoutputlocalhost:3312localhost:3000bundle.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/"
        })
    ]
};

索引.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>

推荐阅读