无法使用 ReactJS、webpack、express 获取 /path

Question

我几乎尝试了所有解决方案，但找不到解决此问题的方法。我正在使用 express 呈现我的 ReactJS 代码，使用 webpack 构建。在从主页重定向之前，我可以毫无问题地打开页面。但是当我尝试在浏览器中输入 URL 或刷新页面时，我无法看到该页面。相反，我看到了这个错误：

Cannot GET /path

我也试过将 historyApiFallback: true 添加到我的 webpack.config.js 但没有成功。

以下是我在 package.json

中的脚本

{
  ...
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --mode development --open",
    "start": "npm run build && node server.js"
  },
  ...
}

这是我的 webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const path = require('path');

const htmlPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
});

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js',
        publicPath: '/',
    },
    devServer: {
        historyApiFallback: true,
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
        ]
    },
    plugins: [htmlPlugin],
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
};

和 server.js 文件：

const path = require('path');
const express = require('express');
const PORT = process.env.PORT || 3000;

const app = express();
app.use(express.static(path.join(__dirname, 'dist')));

app.get('/', function(request, response) {
  response.sendFile(__dirname + '/dist/index.html');
});

app.listen(PORT, error => (
  error
    ? console.error(error)
    : console.info(`Listening on port ${PORT}. Visit http://localhost:${PORT}/ in your browser.`)
));

重要提示

当我运行使用 npm run dev 服务器时，没有任何问题。我可以手动输入URL然后刷新页面

但是当我运行使用 npm run start 服务器时，我遇到了上述问题。

Answer 1

app.get('/', ... ); 仅在 / 路径上发回 index.html，您需要在每个路径上 return 它

app.get('*', function(request, response) {
  response.sendFile(__dirname + '/dist/index.html');
});

无法使用 ReactJS、webpack、express 获取 /path

Cannot GET /path using ReactJS, webpack, express

node.js

express

reactjs

webpack

webpack-dev-server