traefik - 使用 Traefik 的 VueJS 路由器历史记录模式

Question

我需要像这样重写我的应用程序的 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

我该如何修正这个重写规则？

Answer 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、节点、IIS)

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

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

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