[vant] 最新版使用vw佈局+vant元件庫相容方案

深海里的星星i發表於2024-11-07
元件

1. 安裝 vw 外掛

npm i postcss-px-to-viewport-8-plugin --save-dev

2. 配置 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';
import postcsspxtoviewport8plugin from 'postcss-px-to-viewport-8-plugin';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler'
      },
    },
    postcss: {
      plugins: [
        postcsspxtoviewport8plugin({
          unitToConvert: 'px',
          viewportWidth: file => file.indexOf('vant') >= 0 ? 375 : 750, // 設計稿寬度
          unitPrecision: 5, // 單位轉換後保留的精度
          propList: ['*'], // 能轉化為vw的屬性列表
          viewportUnit: 'vw', // 希望使用的視口單位
          fontViewportUnit: 'vw', // 字型使用的視口單位
          selectorBlackList: [], // 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
          minPixelValue: 1, // 設定最小的轉換數值，如果為1的話，只有大於1的值會被轉換
          mediaQuery: true, // 媒體查詢裡的單位是否需要轉換單位
          replace: true, //  是否直接更換屬性值，而不新增備用屬性
          exclude: [], // 忽略某些資料夾下的檔案或特定檔案，例如 'node_modules' 下的檔案
          include: [], // 如果設定了include，那將只有匹配到的檔案才會被轉換
          landscape: false, // 是否新增根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
          landscapeUnit: 'vw', // 橫屏時使用的單位
          landscapeWidth: 1024, // 橫屏時使用的視口寬度
        }),
      ]
    }
  }
})

3. 設定視口

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link
    rel="icon"
    type="image/svg+xml"
    href="/vite.svg"
  />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
  />
  <meta
    author="fmg"
    create-date="2024/11/07"
  />
  <title>Title</title>
</head>

<body>
  <div id="app"></div>
  <script
    type="module"
    src="/src/main.js"
  ></script>
</body>

</html>

相關文章