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，Node，IIS）

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

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

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