大屏适配（只对登录页生效）

"postcss": "^8.5.8",
"postcss-pxtorem": "5.1.1",
"vite-plugin-style-import": "1.4.1",

第一步：准备文件

// utils/rem.js
const baseSize = 30

// 设置 rem 的函数
export function setRem() {
  let html = document.documentElement
  //   // 以 1920 为基准
  let baseWidth = 1920
  let scale = html.clientWidth / baseWidth
  html.style.fontSize = scale * 192 + 'px'
}

// 重置 rem 的函数
export function resetRem() {
  const html = document.documentElement
  html.style.fontSize = ''
}

// 监听窗口变化的函数
export function initRemListener() {
  window.addEventListener('resize', setRem)
}

// 移除监听
export function removeRemListener() {
  window.removeEventListener('resize', setRem)
}

第二步：登录页

import { onMounted, onBeforeUnmount } from 'vue'
import { setRem, resetRem, initRemListener, removeRemListener } from '@/utils/rem'
onMounted(() => {
  // 进入登录页时启用 rem 适配
  setRem()
  initRemListener()
})
onBeforeUnmount(() => {
  console.log('离开不再适配rem')
  // 离开登录页时重置并移除监听
  resetRem()
  removeRemListener()
})

第三步：vite.config.ts配置

import postcssPxToRem from 'postcss-pxtorem'

server:{
    //...
},
css: {
      postcss: {
        plugins: [
          postcssPxToRem({
            rootValue: 192,
            propList: ['*'],
            selectorBlackList: [],
            minPixelValue: 1,
            // 👇 关键：只有登录页文件才转换
            exclude: (filePath: any) => {

              // 只对 login 文件夹下的文件进行转换
              if (filePath.includes('/views/login/') ||
                filePath.includes('login.vue')) {
                return false  // 包含这些文件，进行转换
              }
              return true  // 其他文件排除，不转换
            }
          })
        ]
      }
    }

第四步：重启