VueJS：相对资源在反向代理后面不起作用

Question

简介

我在反向代理 (traefik 2.0) 后面为所有类型的容器 (docker) 提供服务，例如后端应用程序 (nodejs) 或前端应用程序 (vuejs)。实际上，我正在尝试在 https://localhost/my-app.

这样的路径后面提供 VueJS

我期待的

Traefik 重定向 /my-app 到我的 vuejs 容器
VueJS 应用程序工作正常。
VueJS 应用程序使用 <link href=css/app.css>.

我有什么

VueJS 应用无法正常工作，因为没有正确获取资源。
我只得到 index.html（VueJS 的根页面）落后于 https://localhost/my-app
我的浏览器试图在 https://localhost/css/app.css 而不是 https://localhost/my-app/css/app.css 上获取相关资源您是否知道如何使用我的 /my-app 重定向

配置文件

请参阅下面的配置文件。

docker-compose.yml

version: "3.7"

services:
  vuejs:
    restart: always
    build:
      context: .
      dockerfile: ./Dockerfile
    image: my-vuejs-app:latest
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.my-app-router.rule=PathPrefix(`/my-app`)"
      - "traefik.http.routers.my-app-router.tls=true"
      - "traefik.http.middlewares.path-strip.stripprefixregex.regex=^/[a-zA-Z0-9_.-]+"
      - "traefik.http.routers.my-app-router.middlewares=path-strip@docker"

vue.config.js

module.exports = {
  publicPath: './'
}

Answer 1

我使用了一个在请求末尾添加 / 的中间件。这样，相关资源就按预期加载了。

示例： （我的 Docker 服务中 Traefik 的标签）

- "traefik.enable=true"
- "traefik.http.routers.my-app-router.tls=true"
- "traefik.http.routers.my-app-router.rule=PathPrefix(`/my-app`)"
- "traefik.http.middlewares.test-redirectregex.redirectregex.regex=^(https|http)://([a-zA-Z0-9_.-]+)/([a-zA-Z0-9_.-]+)$$"
- "traefik.http.middlewares.test-redirectregex.redirectregex.replacement=$://$/$/"
- "traefik.http.routers.my-app-router.middlewares=test-redirectregex@docker,path-strip@file"

VueJS：相对资源在反向代理后面不起作用

VueJS : relative resources doesn't work behind reverse proxy

reverse-proxy

vue.js

traefik

简介

我期待的

我有什么

配置文件

docker-compose.yml

vue.config.js