Vue.js VueJS：相对资源不'；不能在反向代理后面工作 简介

我在反向代理（traefik 2.0）后面提供所有类型的容器（docker），比如后端应用程序（NodeJ）或前端应用程序（VueJ）。 实际上，我正试图在

https://localhost/my-app

我所期望的

• Traefik将

  /my app

  重定向到my vuejs容器
• VueJS应用程序工作正常
• VueJS应用程序使用相对路径加载资源，如

我所拥有的

• VueJS应用程序无法工作，因为无法正确获取资源
• 我只得到

  index.html（VueJS的根页面）https://localhost/my-app

• 我的浏览器正在尝试获取

  https://localhost/css/app.css

  而不是

  https://localhost/my-app/css/app.css

  您知道如何使用我的

  /my app

  重定向背后的相关资源为VueJS提供服务吗

配置文件 请参阅下面的配置文件

docker-compose.yml vue.config.js

---

我使用了一个中间件，它在请求的末尾添加了一个

/

。这样，就可以按预期加载相关资源

示例：（我的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.middleware.test redirectregex.redirectregex.regex=^（https | http）：/（[a-zA-Z0-9_。-]+）/（[a-zA-Z0-9_。-]+）$”
-“traefik.http.middleware.test redirectregex.redirectregex.replacement=$${1}://$${2}/$${3}/”
-traefik.http.routers.my app router.middleware=test-redirectregex@docker，路径-strip@file"

Hi@Bruno MC，如果不将publicPath更改为/my app，我无法使其正常工作，请共享您的完整配置。此配置将引发错误，因为没有中间件路径-strip@file不存在。

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"

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