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应用无法正常运行，因为无法正确获取资源。
• 我在https://localhost/my-app之后仅得到index.html（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

我找到了解决方案，我使用了一个中间件，该中间件在请求结束时添加了一个 / ，这样相对资源就会按预期加载。

在我的docker服务中查看我的标签（用于traefik）：

Child