在某些情况下，Vue PublicPath 无法获取根网址

Question

代码

我有一个具有这种结构的 Vue 应用程序：

• 公开
  • img
    • logo.png
• 源代码

我有这个router.js

const router = new Router({
  mode: "history",
  routes: [
    {
      path: '/',
      redirect: 'dashboard',
      component: UITemplate,
      children: [
        {path: '/dashboard', name: 'dashboard', component: () => import('/views/Dashboard.vue')},
        {path: '/admin/role', name: 'role', component: () => import('/views/Role.vue')},
      ]
    }
  ]
})

还有这个vue.config.js

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

问题

假设我想在 UITemplate 组件中将 src 链接到 img。看起来像这样

<img :src="/img/brand/logo.png" />

如果我在 localhost:8080/dashboard 上尝试此操作，图像会完美显示。 但是当我试穿 localhost:8080/admin/role 时，图像没有显示。

我在网络面板中查找并尝试在此 url 中查找文件： localhost:8080/admin/role/img/logo.png

那么如何完美使用Vue中的publicPath，让publicPath始终从public文件夹开始（不加/admin/role）？我尝试了另一种解决方案，将 base 添加到 Router，publicPath 中的 webpack.config.js，但它仍然无法正常工作