【发布时间】：2019-05-15 04:28:44
【问题描述】：
我有一个使用 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}`);
});
}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/"
})
]
};这是我的文件夹结构的截图：
控制台网络状态截图：
【问题讨论】：
-
console.log(__dirname + "/../public")` 说了什么？我敢打赌问题出在路径上 -
上传了我的文件夹结构截图
-
记录控制台返回
C:\Users\myusername\Desktop\newrootportfolio\server/../public -
OK ...我的路径似乎是正确的...您可以检查 Web 控制台中的网络选项卡以查看您从服务器收到的内容吗？
-
我在 localhost 5000（服务器）中附加了网络截图 localhost 3312（客户端）工作正常我可以看到 html css 但在我的服务器上我只能看到 css 而不是 html
标签： node.js reactjs express react-router