ln-web/src/App.vue

<template>
  <a-config-provider :locale="locale" :auto-insert-space-in-button="false">
    <RouterView v-if="isRouterReady" :key="routerKey">
      <template #default="{ Component, route }">
        <component
          :is="isFullScreen ? Component : BaseLayout"
          v-bind="isFullScreen ? {} : { content: Component }"
          v-on="isFullScreen ? {} : { refresh: refreshPage }"
        >
          <keep-alive>
            <component
              :is="Component"
              v-if="route.meta.keepAlive"
              :key="route.meta.usePathKey ? route.path : route.name"
            />
          </keep-alive>

          <component
            :is="Component"
            v-if="!route.meta.keepAlive"
            :key="route.meta.usePathKey ? route.path : route.name"
          />
        </component>
      </template>
    </RouterView>
  </a-config-provider>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import BaseLayout from '@/layout/index.vue'
import { useRoute, useRouter } from 'vue-router'

import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
const locale = zhCN

const route = useRoute()
const router = useRouter()
const isRouterReady = ref(false)
const routerKey = ref(Date.now())

onMounted(() => {
  router.isReady().then(() => {
    isRouterReady.value = true

    const mode = import.meta.env.MODE
    const apiHost = import.meta.env.VITE_APP_HOST
    const mqttHostAlarm = import.meta.env.VITE_MQTT_HOST_ALARM
    const mqttHostPoint = import.meta.env.VITE_MQTT_HOST_POINT

    // 环境信息
    // console.log(`🚀CurrentMode: ${import.meta.env.MODE}`)
    // console.log(`🚀HostAPI: ${import.meta.env.VITE_APP_HOST}`)
    // console.log(`🚀ProxyAPI: ${import.meta.env.VITE_APP_HOST}`)
    // console.log(`🚀AlarmMQTT: ${import.meta.env.VITE_MQTT_HOST_ALARM}`)
    // console.log(`🚀PointMQTT: ${import.meta.env.VITE_MQTT_HOST_POINT}`)

    console.log('📘📘📘 Environment LOG 📘📘📘', {
      mode,
      apiHost,
      mqttHostAlarm,
      mqttHostPoint,
    })
  })
})

const isFullScreen = computed(() => Boolean(route.meta?.isFullScreen))
console.log('🚀App route🚀', route)

// 刷新页面
const refreshPage = () => {
  routerKey.value = Date.now()
}
</script>

<style scoped lang="less"></style>