Express ENOENT：没有这样的文件或目录，stat '/index.html'答案

【问题标题】：Express ENOENT: no such file or directory, stat '/index.html'Express ENOENT：没有这样的文件或目录，stat '/index.html'
【发布时间】：2020-06-03 03:36:38
【问题描述】：

我在调试这个问题时遇到了一些麻烦。我几乎有一个 Node.js，它为 React 应用程序提供服务，也充当 REST API。服务器默认运行在 8080 端口。

import express, {Request, Response} from 'express';
import path from 'path';
import helmet from 'helmet';
import morgan from 'morgan';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import {ENVIRONMENT, PORT} from '../util/secrets';
// Import API Routes
import * as home from './controllers/home';

// Create express server
const app = express();

// Add middleware
app.use(helmet());
app.use(morgan('combined'));

// Define API routes
app.get('/api/', home.get);

// Configure environment settings
if (ENVIRONMENT === 'development') {
    // ...
} else {
    // Configure Static Files (Production)
    app.use(express.static("./"));

    // Serve React Static Files (Production)
    app.get('*', (req: Request, res: Response) => {
        res.sendFile(path.resolve(__dirname, "/index.html"));
    });
}

// Start server
app.listen(PORT, () => {
    console.log(`Express started on http://localhost:${PORT}/ in ${ENVIRONMENT} mode.`);
});

export default app;
module.exports = app;

基本上我去 localhost:8080 并且我的应用程序渲染得很好。但是当我转到 localhost:8080/login 时，我从服务器收到以下响应：

Error: ENOENT: no such file or directory, stat '/index.html'
/index.html

这里是摩根日志：

::ffff:172.17.0.1 - - [19/Feb/2020:03:01:18 +0000] "GET / HTTP/1.1" 304 - "-" "Mozilla/5.0 (Windows NT 10.0; Win64
; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"
::ffff:172.17.0.1 - - [19/Feb/2020:03:01:18 +0000] "GET /app.bundle.js HTTP/1.1" 304 - "http://localhost:8080/" "M
ozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
"
Error: ENOENT: no such file or directory, stat '/index.html'
/index.html
::ffff:172.17.0.1 - - [19/Feb/2020:03:01:20 +0000] "GET /login HTTP/1.1" 404 195 "-" "Mozilla/5.0 (Windows NT 10.0
; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"

为什么它在localhost:8080 上呈现我的应用程序而不是localhost:8080/login 上

Dist 文件夹：

dist
  img
  app.bundle.js
  index.html
  server.bundle.js

【问题讨论】：

您的服务器是在 3000 还是 8080 上运行的？你两个都提到了。
而且，当您请求http://localhost:8080/login 时，您期望会发生什么？
@jfriend00 它在 8080 端口上运行，对此感到抱歉。
@jfriend00 我希望http://localhost:8080/login 返回与http://localhost:8080 相同的结果。我希望 url 有 /login 以便 React Router 可以拾取新路由并更新当前视图。
不知道是不是webpack引起的？ http://localhost:8080 有效，因为 express.static() 找到 index.html，但 http://localhost:8080/login 与 express.static() 不匹配，因此它取决于您的 * 路由，也许 webpack 以某种方式搞砸了。

标签： node.js reactjs webpack react-router

【解决方案1】：

创建一个文件夹 build 并将构建文件复制到此文件夹中

将构建文件夹设置为静态

app.use(express.static(path.join(__dirname, 'build')));

然后

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

【讨论】：

有趣，我想你在这里有所收获。

【解决方案2】：

webPack 正在用其他东西替换 __dirname，因为 webpack 旨在以不同于典型文件系统布局的方式打包东西。我不太明白你为什么还要在服务器端代码和资源上运行 webpack。

在您的webpack.config.js 中添加以下内容：

{
  target: 'node',
  node: {
    __dirname: false // disables webpack from changing what __dirname does
  },
}

另外，path.resolve() 并没有做你认为它正在做的事情。这不是真正的正确选择，path.join() 更合适。

改变这个：

path.resolve(__dirname, "/index.html")

到这里：

path.join(__dirname, "/index.html")

您可能可以使用path.resolve(__dirname, "index.html")，但我认为path.join() 是这里更合适的选择。

仅供参考，path.resolve(__dirname, "/index.html") 会导致 "/index.html" 这不是您想要的。

【讨论】：

仍然得到同样的错误:(，有趣的是我会考虑使用 .join() 与 .resolve() ！
@jeninja - 那么，index.html 在哪里？是在__dirname 吗？你确定吗？

【解决方案3】：

发生了同样的错误。我所做的是：

a) 将此行放入您的 js 文件中：const path = require("path")

b) 发送文件响应时加入路径：

app.get("/",function(req, res){
    res.sendFile(path.join(__dirname + "/index.html"));
});

【讨论】：