无论路由如何，如何提供相同的静态文件？

Question

我有一个反应应用程序。我使用 webpack 进行生产构建。现在我尝试设置一个小型 koa 服务器来为生产环境提供 webpack 生成的静态文件。

所以我这样做了

import Koa from 'koa'
import serve from 'koa-static'

const app = new Koa()

app.use(serve('dist/'))

app.listen(3001)

dist/文件（index.html、bundle 等）所在的目录在哪里。这效果很好，但仅适用于路线“/”（localhost：3001 /）在我的应用程序中，我使用反应路由器，因此我需要以示例方式转到/登录（localhost：3001/login）。但当我尝试时，我得到“未找到”。对于 devServer（通过 webpack），这条路线效果很好。我只需要始终服务/dist，无论路线如何。如何做这个白相思木？

Answer 1

一种选择是拦截 Koa 中的 React-router 客户端路由并将其重写为“/”以加载 index.html 和客户端资产。

const REACT_ROUTER_PATHS = [
  '/login',
  '/logout',
  '/other-client-path'
];

app
  .use(async (ctx, next) => {
    if (REACT_ROUTER_PATHS.includes(ctx.request.path)) {
      ctx.request.path = '/';
    }
    await next();
  })
  .use(serve('dist/'));