使用 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 returns 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 的 PathPrefixStripRegex: 将所有流量路由到 index.html，但这会导致为每个请求提供服务 index.html，即使您想要 kitten.jpg.

Answer 2

只需使用 spa-to-http：在您的前端文件夹中创建一个 Dockerfile，内容如下：

FROM node:16-alpine as builder
WORKDIR /code/
ADD package-lock.json .
ADD package.json .
RUN npm ci
ADD . .
RUN npm run build

FROM devforth/spa-to-http:latest
COPY --from=builder /code/dist/ .

并在 compose 中设置 traefik 路由：

myapp:     
   build: "frontend" # name of the folder where Dockerfile is located 
   labels:
     - "traefik.enable=true"
     - "traefik.http.routers.myapp.rule=Host(`myapp.localhost`)"       - 
     - "traefik.http.services.myapp.loadbalancer.server.port=8080" # route traffic t0 port 8080

如果您需要更多信息，可以阅读我的 post 关于 Detailed step-by-step guide to serve Vue.js app using Traefik and spa-to-http

此外，这里有一个 GitHub 存储库：spa-to-http page on GitHub

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

VueJS router history mode with Traefik

traefik

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