VueJS :反向代理背后的相对资源不起作用

Question

简介

我在反向代理(traefik 2.0)后面为所有类型的容器(docker)服务，比如后端应用程序(nodejs)或前端应用程序(vuejs)。实际上，我试图在像https://localhost/my-app这样的路径后面服务一个https://localhost/my-app。

我所期望的

container

• VueJS应用程序
• Traefik将/my-app重定向到vuejs
• 应用程序，
• VueJS应用程序通过<link href=css/app.css>.

等相对路径加载资源。

我所拥有的

• VueJS应用程序不能正常工作，因为无法正确获取资源。浏览器后面的
  • ( VueJS根页面)正在尝试获取https://localhost/css/app.css上的相对资源，而不是https://localhost/my-app/css/app.css，您知道如何使用/my-app重定向

  后面的相对资源为VueJS提供服务吗？

配置文件

请参阅下面的配置文件。

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

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

示例：(我的码头服务中的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=$${1}://$${2}/$${3}/"
- "traefik.http.routers.my-app-router.middlewares=test-redirectregex@docker,path-strip@file"