Node.js 服务器上的Express静态文件未正确加载，但前端是否正确加载？_Node.js_Reactjs_Express_React Router

Node.js 服务器上的Express静态文件未正确加载，但前端是否正确加载？

node.js reactjs express

Node.js 服务器上的Express静态文件未正确加载，但前端是否正确加载？,node.js,reactjs,express,react-router,Node.js,Reactjs,Express,React Router,我有一个ReactJS项目，其中Node/Express服务于我的服务器。在我的前端（React）是服务端口3312，在我的服务器上是服务端口（5000）。当我通过端口3312加载前端时，一切看起来都很好，我的react路由器路由工作正常。（我的api工作非常出色）。但是，当我尝试提供静态文件并查看是否通过服务器（端口5000）获得相同的结果时，我只看到页面上的样式。（我有背景色）我没有看到静态文件应该提供的任何html 当我查看localhost:5000时，控制台中没有错误。但是，我的css

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

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

我很可能认为问题在于express静态文件没有为我的图像或路由器代码提供服务。我还应该注意，我没有使用createreact应用程序，我使用的是webpack dev server react no cli

另外，我没有使用CreateReact应用程序，我没有对自定义网页使用cli

这是我的密码：

（节点服务器）

const express=require（“express”）；
常量路径=要求（“路径”）；
const router=express.router（）；
常量app=express（）；
常数端口=5000；
//在服务器上提供静态文件
app.use（“/public”，express.static（_dirname+“/../public”）；
app.get（“*”，函数（请求、响应）{
sendFile（path.join（_dirname+“/../public/index.html”）；
});
如果（应用程序获取（“环境”）=“开发”）{
应用程序侦听（端口，（）=>{
log（`Server start on port${port}`）；
});
}否则{
应用程序侦听（端口，“171.33.4.126”，（）=>{
log（`Server start on port${port}`）；
});
}

哦，对不起，问题似乎出在index.js中。将

{Routes}

更改为

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“/Routes”导入路由；
render（，document.getElementById（“根”））；

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";

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

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“/components/HomePage”导入主页；
从“/components/AboutPage”导入AboutPage；
从“/components/Contactpage”导入Contactpage；
//让它成为一个组件
导出默认值（）=>(
);

您的react代码未显示，因为

index.html

未包含它。

public/bundle.js

是您传输的代码吗？如果是，请在

之后的

index.html

中添加以下行：

另外，在webpack的输出选项中，将

publicPath

更改为

http://localhost:3312/

。现在，只要运行webpack dev server（使用

BrowserSyncPlugin

），就可以访问您位于

localhost:5000的站点和bundle.js文件应该是
服务很好

请尝试以下操作：
网页包配置
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>


场地
console.log（\uu dirname+“/../public”

）说什么？我打赌问题出在PathUpload上我的文件夹结构的屏幕截图Logged console返回

C:\Users\myusername\Desktop\newrootportfolio\server/./public

OK…我的路径似乎正确…你能检查web console中的网络选项卡以查看你从服务器收到了什么吗？我在localhost 5000（服务器）中附加了网络的屏幕截图LocalHost3312（客户端）工作正常，我可以看到html css，但在我的服务器上，我只能看到css而不能看到html@Jorden修好了吗？问题是您没有渲染Routes组件，因此没有任何内容会显示相同的效果。我检查了前端，控制台返回：

元素类型无效，应为字符串（对于内置组件）或类/函数（对于复合组件），但得到了对象。

我发现您的React代码中存在另一个问题，让我更新答案您在routes.js中导出的不是组件。这就是为什么你会收到这样的错误，快递方面没有问题。看起来你在我的自定义网页包配置中遇到了一些问题，我正在使用网页包插件来包含index.html文件，其中包含bundle.js，我相信？@Jorden你能将你的网页包配置添加到你的问题中吗？我假设您指的是

HtmlWebpackPlugin

。如果是这种情况，并且如果输出是

index.html

，那么它显然不包括

bundle.js

。尝试手动添加它；你也可以通过看你发布的截图来判断；没有对

/public/bundle.js

资产的请求，这意味着它不存在于express后端发送给客户端的html中。但奇怪的是，当我在浏览器中预览源代码时，包含了/bundle.js，但我无法在文件中看到它。不过我会发布我的文件截图。@Jorden我不确定你最后一句话的意思，但我已经更新了我的答案。我希望这有帮助。

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

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

<!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>