Question

我在调试此问题时遇到了一些麻烦。我几乎有一个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

Answer 1

创建文件夹构建并将构建文件复制到此文件夹

将构建文件夹设置为静态

s1Char: C
s1Idx: 3
s2Idx: -1
s1Char: Z
s1Idx: 4
s2Idx: 5
s1Char: D
s1Idx: 5
s2Idx: -1
s1Char: C
s1Idx: 5
s2Idx: -1
s1Char: C
s1Idx: 2
s2Idx: 4
s1Char: A
s1Idx: 3
s2Idx: -1
s1Char: Z
s1Idx: 4
s2Idx: 5
s1Char: D
s1Idx: 5
s2Idx: -1
s1Char: C
s1Idx: 5
s2Idx: -1
s1Char: C
s1Idx: 3
s2Idx: -1
s1Char: Z
s1Idx: 4
s2Idx: 5
s1Char: D
s1Idx: 5
s2Idx: -1
s1Char: C
s1Idx: 5
s2Idx: 2
s1Char: C
s1Idx: 1
s2Idx: 0
s1Char: B
s1Idx: 2
s2Idx: 1
s1Char: A
s1Idx: 3
s2Idx: -1
s1Char: Z
s1Idx: 4
s2Idx: 5
s1Char: D
s1Idx: 5
s2Idx: -1
s1Char: C
s1Idx: 5
s2Idx: 2
s1Char: C
s1Idx: 3
s2Idx: -1
s1Char: Z
s1Idx: 4
s2Idx: 5
s1Char: D
s1Idx: 5
s2Idx: -1
s1Char: C
s1Idx: 5
s2Idx: 2
s1Char: C
s1Idx: 2
s2Idx: 1
s1Char: A
s1Idx: 3
s2Idx: -1
s1Char: Z
s1Idx: 4
s2Idx: 5
s1Char: D
s1Idx: 5
s2Idx: -1
s1Char: C
s1Idx: 5
s2Idx: 2
s1Char: C
s1Idx: 3
s2Idx: -1
s1Char: Z
s1Idx: 4
s2Idx: 5
s1Char: D
s1Idx: 5
s2Idx: -1
s1Char: C
s1Idx: 5
s2Idx: 2
s1Char: C

然后

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

Answer 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"，这不是您想要的。

Answer 3

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

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

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

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

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

3 个答案: