注意，項目中不要寫行內樣式
vue3+vite項目配置適配H5主要安裝一下兩個插件：

1. amfe-flexible（主要用於動態設置根元素字體大小(rem)，以根據屏幕尺寸進行自適應佈局）
2. postcss-px-to-viewport-8-plugin（將px單位轉換為rem）

開始配置：
第一步、安裝amfe-flexible插件

cnpm install amfe-flexible --save

第二步、在main.js中導入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import 'amfe-flexible'

createApp(App).mount('#app')

第三步、安裝postcss-px-to-viewport-8-plus

cnpm install postcss-px-to-viewport-8-plugin --save // 測試不支持配置include

支持配置include

cnpm install postcss-px-to-viewport-8-with-include -S // 親測可用

第四步、配置vite.config.ts文件

......
import postcsspxtoviewport from 'postcss-px-to-viewport-8-plugin'
......

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 需要轉換的單位，默認為"px"，將 px 單位轉換為視口單位的 (vw, vh, vmin, vmax)
          viewportWidth: file => {
            let num = 750; // 公司設計稿寬度
            // van組件是375
            if (file.indexOf('van') > 0) {
              num = 375;
            }
            return num;
          },
          // viewportWidth: 375, // 設計稿的視口寬度
          unitPrecision: 5, // 單位轉換後保留的精度
          propList: ['*'], // 能轉化為vw的屬性列表
          viewportUnit: 'vw', // 希望使用的視口單位
          fontViewportUnit: 'vw', // 字體使用的視口單位
          selectorBlackList: ['ignore-'], // 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
          minPixelValue: 1, // 設置最小的轉換數值，如果為1的話，只有大於1的值會被轉換
          mediaQuery: true, // 媒體查詢裏的單位是否需要轉換單位
          replace: true, //  是否直接更換屬性值，而不添加備用屬性
          exclude: undefined, // 忽略某些文件夾下的文件或特定文件，例如 'node_modules' 下的文件
          include: undefined, // 如果設置了include，那將只有匹配到的文件才會被轉換
          landscape: false, // 是否添加根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
          landscapeUnit: 'vw', // 橫屏時使用的單位
          landscapeWidth: 1920 // 橫屏時使用的視口寬度
        })
      ]
    }
  }
})

本文參與了SegmentFault 思否寫作挑戰賽活動，歡迎正在閲讀的你也加入。