我怎样才能使webpack开发服务器附加一个斜杠？

Question

我希望webpack开发服务器在所有没有资源请求的资源请求后面附加一个斜杠。

例如：
我的索引位于，/my/project/root/index.html
我可以通过Webpack开发服务器在
1. /my/project/root和
2 处访问它。/my/project/root/（请注意此处的斜杠）

我希望将请求1重定向到2。

我已经尝试过使用historyAPIFallback选项，但是您可以提供给该选项的重写仅通过请求，它们不会更改URL。

是否可以使用webpack开发服务器重定向请求？

Answer 1

您可以利用 webpack 的devServer.historyApiFallback和connect-history-api-fallback来附加尾部斜杠。

webpack.config.js

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [{ from: /^.*[^/]$/, to: (context) => `${context.parsedUrl.pathname}/` }],
    },
  },
};

在哪里

rewrites: [{ from: /^.*[^/]$/, to: (context) => `${context.parsedUrl.pathname}/` }]

表示将尾部斜杠附加到任何没有尾部斜杠的网址。

另外，上下文对象具有以下属性：

parsedUrl: Information about the URL as provided by the URL module's url.parse.
match: An Array of matched results as provided by String.match(...).
request: The HTTP request object.

注意：如果您是或 ，上面的答案可能会CANNOT GET <URL>在网页上引发错误。在这种情况下，只需执行以下操作：webpack.output.publicPathauto/

parsedUrl: Information about the URL as provided by the URL module's url.parse.
match: An Array of matched results as provided by String.match(...).
request: The HTTP request object.