Vue项目中PrimeVue Toolbar组件页面居中渲染异常求助

我们团队开发Web应用时，将伙伴分支的Toolbar组件代码完整复制到develop分支的toolbar.component中后，出现样式不一致问题：

• 伙伴分支效果：Toolbar内的logo居左、按钮组居右，整体呈两端分布
• develop分支效果：整个Toolbar内容居中显示（注：develop分支暂无首页模块，Toolbar下方为空）

以下是相关代码：

toolbar.component.vue #

<script>
export default {
  name: "toolbar-component",
}
</script>

<template>
  <pv-toolbar class="toolbar">
    <template #start>
        <img src="../../assets/images/flexpal-logo.png" alt="Flex Pal Logo" style="width: 350px; height: 70px;"/>
    </template>
    <template #end>
      <ul class="list-none p-0 m-0 overflow-hidden" style="display:flex; ">
        <li>
          <Button>
            <a href="/home"> Home </a>
          </Button>
        </li>
        <li>
          <Button>
            <a href="/routines"> Routines </a>
          </Button>
        </li>
        <li>
          <Button>
            <a href="/nutrition"> Nutrition </a>
          </Button>
        </li>
        <li>
          <Button>
            <a href="/book_section"> Book Session </a>
          </Button>
        </li>
        <li>
          <Button>
            <a href="/profile"> Profile </a>
          </Button>
        </li>
      </ul>
    </template>
  </pv-toolbar>
</template>

<style scoped>
.toolbar{
  width: 100vw;
  display: flex;
  justify-content: space-around;

  li{
    list-style-type: none;
    display: inline;
    padding: 10px;
    Button{
      background-color: #6baada;
      border-radius: 10px;
      a{
        text-decoration: none;
        color: white;
      }
    }

  }
}
</style>

main.js（两个分支代码完全一致） #

import { createApp } from 'vue'
import './style.css'
import app1 from './app.vue'

import PrimeVue from "primevue/config";
import DialogService from "primevue/dialogservice";
import ConfirmationService from "primevue/confirmationservice";
import ToastService from "primevue/toastservice";

import 'primeicons/primeicons.css';
import 'primevue/resources/primevue.min.css';
import 'primeflex/primeflex.css';
import router from "./router/index.js";

// 注册UI组件
import Button       from "primevue/button";
import Card         from "primevue/card";
import SelectButton from "primevue/selectbutton";
import Sidebar      from "primevue/sidebar";
import Toolbar      from "primevue/toolbar";
import Calendar from 'primevue/calendar';
import Tag from "primevue/tag";
import InputText from 'primevue/inputtext';
import Menubar      from "primevue/menubar";
import Accordion from 'primevue/accordion';
import AccordionTab from 'primevue/accordiontab';
import Panel from 'primevue/panel';
import FloatLabel from 'primevue/floatlabel';
import Avatar from "primevue/avatar";
import Divider from "primevue/divider";

const app = createApp(app1);

app.use(PrimeVue, { ripple: true })
    .use(DialogService)
    .use(ConfirmationService)
    .use(ToastService)
    .component('Button', Button)
    .component('Card', Card)
    .component('pv-select-Button', SelectButton)
    .component('pv-sidebar', Sidebar)
    .component('Toolbar', Toolbar)
    .component('Calendar', Calendar)
    .component('Tag', Tag)
    .component('pv-InputText', InputText)
    .component('pv-button', Button)
    .component('Menubar', Menubar)
    .component('Accordion', Accordion)
    .component('AccordionTab', AccordionTab)
    .component('pv-floatLabel', FloatLabel)
    .component('pv-panel', Panel)
    .component('pv-toolbar', Toolbar)
    .component('pv-avatar', Avatar)
    .component('pv-divider', Divider)
    .use(router);
app.mount('#app');

app.vue（两个分支代码完全一致） #

<script>
  import ToolbarComponent from "./public/components/toolbar.component.vue";

  export default {
    name: 'app',
    components: {ToolbarComponent},
    title: 'Flex Pal',
    data() {
      return {
        drawer: false,
        items: [
          { label: 'Routine List', to: '/routine-list'},
          { label: 'Plans', to: '/plans'},
          { label: 'Programming Session', to: '/programming-session'},
          { label: 'Home', to: '/home'},
        ]
      }
    },
    methods: {
    }
  }
</script>
<template>
  <toolbar-component></toolbar-component>
   <router-view/>
</template>
<style >
</style>

排查情况 #

已确认项目根目录的style.css为空，且完整复制了所有相关代码，但Toolbar仍保持居中显示。尝试过修改Toolbar及内部组件的样式（如移除内边距、调整flex布局属性等），均无效果。虽然可以基于伙伴分支新建分支继续开发，但希望排查出问题根源，寻求技术帮助。

内容的提问来源于stack exchange，提问作者Juan Fabritzzio Pescoran Angul