使用 express 服务 REACT 组件不起作用（只呈现 html 文件）

Question

你好，我正在学习 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]
}

我尝试了各种方法，不幸的是它仍然无法正常工作

Answer 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()
})

使用 express 服务 REACT 组件不起作用（只呈现 html 文件）

Serving REACT component using express is not working (just html file is rendered)

express

reactjs

webpack

mern