带有 Traefik 的 VueJS 路由器历史模式答案

【问题标题】：VueJS router history mode with Traefik带有 Traefik 的 VueJS 路由器历史模式
【发布时间】：2018-09-02 20:01:46
【问题描述】：

我需要像这样重写我的应用程序的 URL：https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

我使用 Traefik 作为反向代理和 Docker Compose。

这是我在 Docker 中的原始配置：

application:
    build: ./domain.app
    volumes:
      - ./domain.app/dist:/app
    networks:
      - net
    labels:
      - "traefik.frontend.rule=Host:domain.me"
      - "traefik.port=8081"
      - "traefik.backend=domain.me"
      - "traefik.frontend.entryPoints=http,https"

使用该配置：

https://domain.me 正在工作

https://domain.me/anything 返回 404

如何解决这个重写规则？

【问题讨论】：

你如何提供你的 vue.js 文件？使用 Nginx、Apache 还是其他？
我正在为那些使用 node-static 的人提供服务。 static --host-address 0.0.0.0 -p 8081 --gzip
如果这是用于生产，我强烈建议您使用适当的静态文件服务器，例如 nginx 或 apache。然后，您可以按照链接中的说明进行配置更改：router.vuejs.org/guide/essentials/…。如果没有，您可以按照 vue.js 指南中的说明实现自己的 http 服务器：router.vuejs.org/guide/essentials/…
您不想为此使用 Traefik 的原因是 traefik 不知道您的服务器上有哪些文件。 Traefik 只是将请求中继到您的服务器，然后确定文件是否存在（200）或不存在（404）。如果您将 traefik 配置为重写每个未知路由，则必须编写一个 PathPrefixStripRegex 排除服务器上存在的每个文件，而您真的不想这样做，更不用说更新它了。
好吧，我想我会像以前一样放弃 Traefik 转而支持 Nginx！谢谢。

标签： traefik

【解决方案1】：

对于 vue.js 路由历史模式，您希望捕获所有不指向服务器上资源的路由并将它们转发到您的 index.html。例如：

https://example.com                   --> /index.html
https://example.com/route/to/subsite  --> /index.html

但您仍然希望能够访问服务器上的资源。例如：

https://example.com/path/to/kitten.jpg --> /path/to/kitten.jpg not /index.html

为此，您必须找到支持 Catch-All Fallback 的后端服务器。您可以使用vue.js Guide 中提到的那些（Apache、Nginx、Node、IIS）

为什么我不能为此使用 traefik？

如上所述，您仍然希望能够提供静态资源。但是traefik只是一个路由器。它只能访问请求的信息，不能访问服务器的信息。但为了决定是提供 index.html 还是提供静态资源，您必须有权访问这些资源。

您可以使用 Traefik 的 PathPrefixStripRegex: 将所有流量路由到 index.html，但这会导致为每个请求提供 index.html，即使您想要 kitten.jpg。

【讨论】：