使用 Express (Node.js) 在 React 应用程序中找不到 index.js

Question

我正在尝试使用我自己的快速服务器来生产 React 应用程序，但是对于具有 React js 脚本的index.js ，我得到了 404 状态未找到。

我使用的文件夹结构如下

server.js
+public
| index.html
|
__+ src
   |
   __ index.js

（index.html在public文件夹，index.js在src文件夹）

所以在我的server.js中，我有：

// Built-in Node.js modules
let fs = require('fs');
let path = require('path');

// Third-party Node.js modules
let express = require('express');


// Express App
let public_dir = path.join(__dirname, 'public');

// let port = 80; // production port
let port = 8000; // test/debug port

let app = express();
app.use(express.static(public_dir));

app.listen(port, () => {
    console.log("Now listening on port " + port);
});

在我的index.html中，我在我的头标签中调用：

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="./src/index.js"></script>

最后，当我运行 server.js 时，出现以下错误：

Failed to load resource: the server responded with a status of 404 (Not Found)

如果您可能需要，这是我的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>

    <App />

  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

谢谢！

Answer 1

node.js 服务器不像 apache 服务器那样上传索引文件并自动呈现它，您需要告诉 node.js 在路由/

// Built-in Node.js modules
let fs = require('fs');
let path = require('path');

// Third-party Node.js modules
let express = require('express');

// Express App
let public_dir = path.join(__dirname, 'public');

// let port = 80; // production port
let port = 8000; // test/debug port

let app = express();
app.use(express.static(public_dir));

//response with index file

app.get('/', function (req, res) {
   res.sendFile( __dirname + "/" + "index.html" );
})
app.listen(port, () => {
    console.log("Now listening on port " + port);
});