简化写法，采用 ClientOnly 解决 Non-SSR-Friendly 组件编译问题

<template>

  <div v-if="TabsComponent">

  <div>

    <a-config-provider :theme="{

      token: {

        colorPrimary: '#49BF7C',

      },

    }">

      <component :is="TabsComponent" type="card" size="large">

        <component :is="TabPaneComponent" key="tab1">

      <a-tabs type="card" size="large">

        <a-tab-pane key="tab1">

          <template #tab>

            <div class="tab-text">车辆实时位置<br />Bus Realtime Location</div>

          </template>

          位置每5秒自动刷新。Location refreshes automatically every 5 seconds

          <component :is="RealtimeMapComponent" v-if="RealtimeMapComponent" />

          <component :is="BusChartVueComponent" v-if="BusChartVueComponent" />

        </component>

        <component :is="TabPaneComponent" key="tab2">

          <RealtimeMap />

          <BusChartVue />

        </a-tab-pane>

        <a-tab-pane key="tab2">

          <template #tab>

            <div class="tab-text">时间表<br />Timetable</div>

          </template>

          <component :is="BusTableComponent" v-if="BusTableComponent" />

        </component>

      </component>

          <BusTable></BusTable>

        </a-tab-pane>

      </a-tabs>

    </a-config-provider>

  </div>

</template>

<script>

import { onMounted, ref } from 'vue';

import { Tabs } from 'ant-design-vue';

import { ConfigProvider } from 'ant-design-vue';

export default {

  name: 'TabView',

  components: {

    ATabs: Tabs,

    ATabPane: Tabs.TabPane,

    AConfigProvider: ConfigProvider

  },

  setup() {

    // 因为 RealtimeMap 和 BusTable 里面用了 document，所以需要用到异步加载。

    const TabsComponent = ref(null);

    const TabPaneComponent = ref(null);

    const RealtimeMapComponent = ref(null);

    const BusChartVueComponent = ref(null);

    const BusTableComponent = ref(null);

    onMounted(async () => {

      const { Tabs } = await import('ant-design-vue');

      const { TabPane } = Tabs;

      const RealtimeMap = await import('./RealtimeMap.vue');

      const BusChartVue = await import('./BusChartVue.vue');

      const BusTable = await import('./BusTable.vue');

      TabsComponent.value = Tabs;

      TabPaneComponent.value = TabPane;

      RealtimeMapComponent.value = RealtimeMap.default;

      BusChartVueComponent.value = BusChartVue.default;

      BusTableComponent.value = BusTable.default;

    });

    return {

      TabsComponent,

      TabPaneComponent,

      RealtimeMapComponent,

      BusChartVueComponent,

      BusTableComponent,

    };

  },

  }

};

</script>

<a data-fancybox title="" href="https://mirrors.sustech.edu.cn/git/sustech-online/sustech-online-ng/-/raw/master/docs/transport/busline2.png">![](./busline2.png)</a>

<ClientOnly>

  <TabView></TabView>

</ClientOnly>

<a data-fancybox title="" href="https://mirrors.sustech.edu.cn/git/sustech-online/sustech-online-ng/-/raw/master/docs/transport/busline2.png">![](./busline2.png)</a>

<ClientOnly>

  <TabView></TabView>

</ClientOnly>