服务器上的Express静态文件加载不正确，但React前端加载正确吗？
服务器上的Express静态文件加载不正确，但React前端加载正确吗？
提问于 2018-12-14 05:51:51
我有一个ReactJS项目，其中Node/Express为我的服务器提供服务。在我的前端(React)是服务端口3312，在我的服务器上是服务端口(5000)。当我通过端口3312加载我的前端时，一切看起来都很好，我的react路由器路由也工作得很好。(我的api的工作一切都很好)。但是，当我尝试提供静态文件并查看是否通过我的服务器(端口5000)获得相同的结果时，我只能在我的页面上看到样式。(我有一个背景颜色)我看不到任何静态文件应该提供的html？
当我查看localhost:5000时，我在控制台中没有得到任何错误。但是，我的css样式在页面上显示正确(因为我在身体上设置了背景色)。但是，我看不到我的任何前端React显示html代码。我查看了我的index.html文件，并在根目录中放置了一个简单的测试，它正在显示，但我不明白为什么我的React代码没有显示在我的服务器上。
我很可能认为问题出在express静态文件没有提供我的图像或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/"
})
]
};
这里是我的文件夹结构的截图：
控制台网络状态截图：
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-12-20 07:14:03
您的react代码没有显示，因为index.html没有包含它。public/bundle.js是您转换的react代码吗？如果是这样，请在<div id="root"></div>之后将以下行添加到index.html中
<script src="/public/bundle.js"></script>如果不是，则将src指向的路径更改为正确的路径。
您可以很好地看到您的css样式，因为您已经在index.html中包含了这些样式。
更新:根据你的webpack配置几点：
- 将您运行webpack-dev-
- 的端口更改为3000。您还必须将
BrowserSyncPlugin的代理更改为http://localhost:3000/。然后，您可以在浏览器中转到localhost:3312，如果我错了，请求将被代理到在端口3000. - Correct me上运行的webpack开发服务器，但是您还没有完整地发布您的
index.html。我猜您已经在该.html文件中的某处了一行看起来像<script src="/bundle.js"></script>的代码--根据您的最新评论，它似乎是由HtmlWebPackPlugin添加的。webpack-dev-bundle.js通过/为publicPath提供服务，这是您在webpack的output选项中指定的output。只要您通过localhost:3312或localhost:3000访问您的站点，这就可以很好地工作。但是，在端口5000上运行的express.js服务器并不知道webpack-dev-server正在为/上的bundle.js提供服务；因此，当您转到localhost:5000时，您最终将看不到任何react代码。至于样式，您已经通过/public/assets/css正确地为它们提供了服务，这是express.js服务器能够理解的，因为您已经在一行中指定了：app.use("/public", express.static(__dirname + "/../public"))。解决方案是将.html文件中的<script src="/bundle.js"></script>行更改为:此外，在webpack的输出选项中，将publicPath更改为http://localhost:3312/。现在，只要您的BrowserSyncPlugin-dev-server正在运行，您就可以在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>Stack Overflow用户
发布于 2018-12-14 05:59:16
哦，对不起，看起来问题出在index.js上。将{Routes}更改为<Routes />
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"));您在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>
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53770611
复制相关文章
相似问题