具体思路如下：

1、监听浏览器屏幕变化，通过监听屏幕宽高，辨别出是横屏，还是竖屏状态

在项目的起始根页面进行监听，我就是在App.vue文件下进行监听

代码如下：

<template>
  <RouterView />
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'

const isMobile = () => {
  //判断是否为移动端设备
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
const reloadFn = () => {
  // 阻止菜单默认事件，项目不需要就删除这段代码
  document.oncontextmenu = function (e) {
    e.preventDefault()
  }
  /** 切换横竖屏时重载页面
   * @rule1 横屏切竖屏
   * @rule2 竖屏切横屏
   */
  window.addEventListener('resize', () => {
    let screenWidth = window.innerWidth || document.documentElement.clientWidth
    let screenHeight = window.innerHeight || document.documentElement.clientHeight
    const rule1 = screenWidth < screenHeight //手机竖屏
    const rule2 = screenWidth > screenHeight //手机横屏
    const isMobileX = isMobile() //判断是否为移动端设备
    if (rule1 && isMobileX) {
      //手机竖屏
      // window.location.reload() //重新刷新浏览器，根据项目需求，是否需要刷新整个页面
      console.log('手机竖屏的宽度', screenWidth)
      console.log('手机竖屏的高度', screenHeight)
    } else {
      //手机横屏
      // window.location.reload() //重新刷新浏览器，根据项目需求，是否需要刷新整个页面
      console.log('手机横屏的宽度', screenWidth)
      console.log('手机横屏的高度', screenHeight)
    }
  })
}
onMounted(() => {
  reloadFn()
})
</script>

<style scoped></style>

2、把可以区分横屏还是竖屏的字段参数（自定义名字），存储进去vuex /  pinia,方便后续统一更改每个页面适配样式

在pinia 文件的写法如下：

import { defineStore } from 'pinia'
// 屏幕横竖屏适配
export const useStoreScreen = defineStore('screen', {
  state: () => {
    return {
      styleType: 1, // 1手机 2横屏
      styleTypeClass: '', //  g-mobile竖屏 g-pc横屏
      scroll: true, // 是否允许滚动
      indexMaxWidth: '1024', // pc端首页最大宽度(px)
      maxWidth: '1024' // pc端最大宽度(px)
    }
  },
  getters: {},
  actions: {
    changeClass(val: any) {
      // console.log('styleTypeClass-->', val)
      this.styleTypeClass = val
    },
    changeStyleType(val: any) {
      this.styleType = val
    }
  }
})

3、在App.vue的全局监听添加 pinia 参数字段

代码如下：

<template>
  <RouterView />
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import { RouterView } from 'vue-router'
// import { storeToRefs } from 'pinia'
import { useStoreScreen } from '@/stores/screen'
const storeScreen = useStoreScreen()
// let { styleTypeClass } = storeToRefs(storeScreen)
const isMobile = () => {
  //判断是否为移动端设备
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
}
const reloadFn = () => {
  // 阻止菜单默认事件，项目不需要就删除这段代码
  document.oncontextmenu = function (e) {
    e.preventDefault()
  }
  /** 切换横竖屏时重载页面
   * @rule1 横屏切竖屏
   * @rule2 竖屏切横屏
   */
  window.addEventListener('resize', () => {
    let screenWidth = window.innerWidth || document.documentElement.clientWidth
    let screenHeight = window.innerHeight || document.documentElement.clientHeight
    const rule1 = screenWidth < screenHeight //手机竖屏
    const rule2 = screenWidth > screenHeight //手机横屏
    const isMobileX = isMobile() ////判断是否为移动端设备
    if (rule1 && isMobileX) {
      //手机竖屏
      // window.location.reload() //重新刷新浏览器，根据项目需求，是否需要刷新整个页面
      storeScreen.changeClass('g-mobile') //设置公共参数，存进pinia,设置竖屏 css （class的自定义名字）
      console.log('手机竖屏的宽度', screenWidth)
      console.log('手机竖屏的高度', screenHeight)
    } else {
      //手机横屏
      // window.location.reload() //重新刷新浏览器，根据项目需求，是否需要刷新整个页面
      storeScreen.changeClass('g-pc') //设置公共参数，存进pinia,设置竖屏 css （class的自定义名字）
      console.log('手机横屏的宽度', screenWidth)
      console.log('手机横屏的高度', screenHeight)
    }
  })
}
onMounted(() => {
  reloadFn()
})
</script>

<style scoped></style>

4、每个页面做好屏幕，横、竖屏两套样式，监听横屏还是竖屏的字段参数，展示出对应的横屏还是竖屏class样式

主要代码如下：

<script lang="ts" setup>
import { ref, onMounted, nextTick, onBeforeUnmount, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useStoreScreen } from '@/stores/screen'
const storeScreen = useStoreScreen()
let { styleTypeClass } = storeToRefs(storeScreen)
const renewUp = ref(styleTypeClass.value || 'g-mobile') // g-mobile竖屏 g-pc横屏
watch(
  //监控数据变化
  () => styleTypeClass.value,
  (newVal: any, oldVal) => {
    renewUp.value = newVal // g-mobile竖屏 g-pc横屏
  }
)
</script>