Webpack Dev Server，允许其中带有“点”的路径

Question

在我的 React.js 应用程序中，我有这样一条路线：

/foo/foo.bar/foo

当我加载此 URL（在浏览器上单击刷新）时，我得到：

Cannot GET /foo/foo.bar/foo

我认为问题是 Webpack Dev Server 认为这个 URL 指的是静态资产并尝试加载它。

我该如何解决这个问题？（我需要点）

Answer 1

更新了答案，因为我没有意识到您使用的是 webpack 开发服务器： 您可以在 webpack.config.js 中创建一个代理，将请求转发到 /foo/foo.bar。您可以将请求转发到另一个为您的 index.html 文件提供服务的后端服务器，或者您可以覆盖代理并直接让其 return index.html。下面的示例配置

proxy: [
    {
        path: /\/foo\/foo.bar\/foo/,
        bypass: function(req, res, proxyOptions) {
            return '/index.html';
        }
    }
]

它有点老套，但它确实有效。

Answer 2

无需设置代理，您可以简单地告诉 Webpack（或更具体地说，在您的 Webpack 配置中 connect-history-api-fallback that it uses) not to treat paths with dots in them as static assets by setting disableDotRule 到 true：

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      disableDotRule: true
    }
  }
};

Webpack Dev Server，允许其中带有“点”的路径

Webpack Dev Server, allow paths with `dot` in them

webpack

webpack-dev-server