Webpack构建后用serve访问非根路径出现404错误求助

我用Webpack构建项目，执行步骤：

1. yarn build
2. yarn build:start

根路径http://localhost:8765/可正常打开，但直接在URL输入/user-login、/user等路径时，出现「404: The requested path could not be found」错误。以下是相关配置及代码：

webpack.config.js #

const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

const deps = require("./package.json").dependencies;
module.exports = {
  output: {
    publicPath: "/",
  },
  resolve: {
    extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
  },
  devServer: {
    port: 8765,
    historyApiFallback: true,
  },
  module: {
    rules: [...],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
    }),
  ],
};

package.json 脚本配置 #

"scripts": {
    "build": "webpack --mode production --env file=production",
    "build:dev": "webpack --mode development --env file=development",
    "build:start": "cd dist && PORT=8765 npx serve",
    "start": "webpack serve --open --mode development --env file=development",
    "start:live": "webpack serve --open --mode development --live-reload --hot"
  },

RouteProvider 代码 #

const RouteProvider = () => {
    return (
            <Routes>
                <Route path="/" element={<Login />} />
                <Route path="/user-login" element={<Login />} />
                <Route path="/user" element={<User/>} />
            </Routes>
    );
}

export default RouteProvider;

App.tsx 代码 #

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import RouteProvider from "./RouteProvider";
    
const App = () => {
  return (
    <div className="App">
      <Suspense fallback="loading">
        <RouteProvider />
      </Suspense>
    </div>
  );
};

export default App;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

原因 #

开发环境用webpack serve时配置了historyApiFallback: true，该配置会让devServer把所有路由请求转发到index.html，保证React Router的前端路由正常工作。但生产构建后用npx serve启动时，serve工具默认未开启SPA路由 fallback 功能，直接访问子路径时，服务器会去寻找对应物理文件，找不到就返回404。

解决方案 #

修改package.json里的build:start脚本，给serve添加--single参数（该参数会让serve把所有请求重定向到index.html）：

"build:start": "cd dist && PORT=8765 npx serve --single"

修改后重新执行yarn build:start，再直接访问/user-login、/user等路径即可正常加载页面。

内容的提问来源于stack exchange，提问作者Profer