1. 安装依赖

npm i postcss-px-to-viewport -D

2. 引入插件并配置

因为 vite 中已经内联了 postcss，所以并不需要额外地创建 postcss.config.js 文件

vite.config.js

import postcsspxtoviewport from "postcss-px-to-viewport"  // 引入插件

export default defineConfig({
    css: {
        postcss: {
            postcsspxtoviewport({
                unitToConvert: 'px',  // 要转化的单位
                viewportWidth: 750,  // UI 设计稿的宽度
                unitPrecision: 6,  // 转换后的精度，即小数点位数
                propList: ["*"], // 指定转换的 css 属性的单位， * 代表全部 css 属性的单位都进行转换
                viewportUnit: 'vw',  // 指定需要转换成的视窗单位，默认 vw
                fontViewportUnit: 'vw',  // 指定字体需要转换成的视窗单位，默认 vw
                selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名
                minPixelValue: 1,  // 默认值 1，小于或等于 1px 则不进行转换
                mediaQuery: true, // 是否在媒体查询的 css 代码中也进行转换，默认 false
                replace: true,  // 是否转换后直接更换属性值
                landscape: false,  // 是否处理横屏情况
            })
        }
    }
})

3. 定义声明文件

由于这个插件并没有提供 vite 中 ts 的声明文件，所以需要自己配置

与 tsconfig.json 同级创建 post-px-to-viewport.d.ts

declare module 'postcss-px-to-viewport' {
 
    type Options = {
        unitToConvert: 'px' | 'rem' | 'cm' | 'em',
        viewportWidth: number,
        viewportHeight: number, // not now used; TODO: need for different units and math for different properties
        unitPrecision: number,
        viewportUnit: string,
        fontViewportUnit: string,  // vmin is more suitable.
        selectorBlackList: string[],
        propList: string[],
        minPixelValue: number,
        mediaQuery: boolean,
        replace: boolean,
        landscape: boolean,
        landscapeUnit: string,
        landscapeWidth: number
    }
 
    export default function(options: Partial<Options>):any
}

4. 引入声明文件

tsconfig.json

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue","postcss-px-to-viewport.d.ts"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },

  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}