使用 express 服务 REACT 组件不起作用（仅呈现 html 文件）
Posted
技术标签:
【中文标题】使用 express 服务 REACT 组件不起作用（仅呈现 html 文件）【英文标题】：Serving REACT component using express is not working (just html file is rendered) 【发布时间】：2018-05-15 14:33:02 【问题描述】：您好，我正在学习 MERN 堆栈，但在为我的 react 组件提供服务时遇到问题，这是 server.js 代码
const path = require('path')
const fs = require('fs')
const express = require('express')
const app = express()
app.set('view engine', 'html')
app.engine('html', function (path, options, callback)
fs.readFile(path, 'utf-B', callback)
)
const cors = require('cors')
app.use(cors(
'origin': '*',
'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
'preflightContinue': false,
'optionsSuccessStatus': 204
))
const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded(extended: true))
app.use(express.static(path.join(__dirname, '/build')))
app.get('*', (req, res) =>
res.sendFile(path.join(__dirname, '/build'), 'index.html')
res.end()
)
app.use('/*', (req, res) => res.status(404).send())
const isDev = true
app.use((err, req, res, next) =>
res.status(500).json(
error: 500,
message: 'Internal Server Error!',
stack: isDev
? err.stack
: null
)
)
const port = 8080
app.listen(port, () =>
console.log('app running at localhost:' + port)
)
文件夹结构
build
bundle.js
index.html
client
App.js
index.html
index.js
server
server.js
webpack.config.js
package.json
在控制台中没有可见问题 - HTML 正在正确呈现，但 React 组件不可见。
这是我的 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, shrink-to-fit=no'>
<meta name='author' content='Bartosz Ciach'>
<meta name='description'
content='Check how your habits, weather conditions and daily activities affect your life & health.'>
<meta name='keywords' content=''>
<link rel='icon' type='image/svg+xml' href='assets/icons/favicon.ico'>
<title>Doctor Crohn</title>
</head>
<body>
<div id='app'></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
下面是我的 webpack.config.js 文件代码
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin(
template: './client/index.html',
filename: 'index.html',
inject: 'body'
)
module.exports =
entry: './client/index.js',
output:
path: path.join(__dirname, '/build'),
filename: 'bundle.js'
,
devServer:
contentBase: './client',
hot: true,
port: 3000
,
module:
loaders: [
enforce: 'pre',
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'standard-loader',
,
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loaders: ['react-hot-loader/webpack', 'babel-loader']
,
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
,
test: /\.(png|jpg)$/,
loaders: ['url-loader', 'img-loader']
,
test: /\.svg$/,
loader: 'svg-url-loader'
]
,
plugins: [HtmlWebpackPluginConfig]
我尝试了各种方法，但不幸的是它仍然无法正常工作
【问题讨论】：
也许这可以回答你的问题：serving-static-html-into-a-react-component 1.您的 index.html 中是否有对您的 bundle.js 的引用？ 2. 使用当前的结构和服务器代码，您将无法从构建目录（您的捆绑包所在的位置）提供静态资产，只能从客户端目录提供 - 顺便说一句，这似乎是错误的，这样会更好让 Webpack 使用位于客户端目录中的 index.html 作为模板重建 index.html，并从 build 目录中提供所有内容。这可以通过html-webpack-plugin npm 模块来完成。它还将动态插入对已编译的 bundle.js 的调用，从而也解决了第 1 点。
我刚刚添加了代码sn-ps
是的，所以从您的 index.html 来看，bundle.js 文件应该与 index.html 文件位于同一目录中，根据您的文件夹结构，情况并非如此。
基本上，这里有两个选择。 1. 将 webpack 配置中的输出路径更改为 /client 而不是 /build，这通常可以与您当前的服务器配置一起使用，但总体而言并不好，因为它将生产构建直接输出到源文件夹中，或者 2. 更改您的服务器配置从/build 目录而不是/client 提供资产和index.html，并找到一种方法在构建过程中将index.html 的副本生成到/build 文件夹中（您也可以手动复制它，至少第一次看看它是否有效）。
【参考方案1】：
只是为了结束这个问题。
让应用程序正确呈现的最后一个障碍是修改server.js 文件中的几行以正确指向/build 目录。考虑到文件夹结构，以及/build 目录相对于server.js 文件位置的位置，更新了以下几行：
app.use(express.static(path.join(__dirname, '../build')))
app.get('*', (req, res) =>
res.sendFile(path.join(__dirname, '../build'), 'index.html')
res.end()
)
【讨论】：
Jaxx 是否有机会对我遇到的问题再提出一个问题？ 那太好了 @Rachomir 您仍然可以使用原始问题下方 cmets 中的聊天链接。给我留言，我很乐意提供帮助。以上是关于使用 express 服务 REACT 组件不起作用（仅呈现 html 文件）的主要内容，如果未能解决你的问题，请参考以下文章
使用 express 和 es6 渲染 react 和 jsx 服务端
使用dwr后，javaweb设置的session超时失效，web.xml和tomcat设置都不起作
react-bootstrap：模态的 dialogClassName 道具不起作用