javascript - 刷新时找不到节点服务器索引文件 (f5)

Question

我尝试设置一个快速服务器来托管我的反应单页应用程序。当我运行脚本并在浏览器上打开http://localhost:8080时，会加载 index.html 文件，我可以浏览我的应用程序。

但是当我在 url 包含一些路径（例如http://localhost/items，而不是http://localhost/）时刷新页面时，我收到以下错误：

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

如果我删除 url 的路径http://localhost/并刷新页面，我会再次获得 index.html 并且应用程序会再次运行。

import http from 'http';
import https from 'https';
import express from 'express';
import path from 'path';
import cors from 'cors';

var env = {
    proc: 'http',
    port: 8080,
    host: 'localhost',
};

app.use(cors());
app.options('*',cors());
app.use(function allowCrossDomain(req,res,next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

app.use(express.static('./build/public'));

app.get('*', function(req, res) { 
    console.log('test');

    //These don't work
    return res.sendFile(__dirname + 'index.html'); 
    //return res.sendFile(path.resolve(__dirname + 'index.html', '../'))
    //return res.sendFile('public/index.html' , { root : __dirname});
    //return res.sendFile('index.html');
});

var server = (env.proc != 'https') 
             ? http.createServer(app)
             : https.createServer(null, app);

server.listen(env.port, function() {
    console.log('' + env.proc + '://' + env.host + ':' + env.port + ' listening...'); 
});

我认为在服务器上使用*会app.get('*', function(req, res) { ... });在每次 get 调用时响应作为第二个参数给出的响应（应该将 index.html 文件作为响应发送）。因此，两者http://localhost:8080和http://localhost/items服务器都应使用索引文件进行响应。但这不起作用。

我试图替换响应

return res.sendFile(__dirname + 'index.html'); 

有以下回应

return res.sendFile(path.resolve(__dirname + 'index.html', '../'))

但我得到同样的错误。我也试过这个

return res.sendFile('public/index.html' , { root : __dirname});

但后来我得到这个错误

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

这是我的 webpack.server.js

var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

var nodeModules = {};

fs.readdirSync('node_modules')
  .filter((x) => {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach((mod) => {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = {
  entry: ['./src/index.js'],
  target: 'node',
  mode: 'development',  
  output: {
    filename: 'server.js',
    path: path.join(__dirname, '../', 'build'),
  },
  externals: nodeModules,
  plugins: [
    new webpack.IgnorePlugin(/\.(css|less)$/),
    new webpack.BannerPlugin({ 
      banner: 'require("source-map-support").install();',
      entryOnly: false,
      raw: true,
    }),
  ],
  devtool: 'sourcemap'

};

我的 npm 脚本

"scripts": {
    "build:server": "webpack --config config/webpack.server.js --watch",
    "build:client": "webpack --config config/webpack.client.js --watch",
    "start": "nodemon build/server.js"
},

我已经查找了一堆具有相同问题的帖子，但是这些对我不起作用

node.js - 类型错误：路径必须是绝对路径或指定 res.sendFile 的根目录

TypeError：路径必须是绝对路径或指定根到 res.sendFile

Express.js “路径必须是绝对路径或指定根到 res.sendFile” 错误

node.js TypeError: path must be absolute or specified root to res.sendFile [failed to parse JSON]

有人可以帮忙吗？

标签： javascriptnode.jsexpresshttphttps