1. 下载插件
npm i postcss-px-to-viewport autoprefixer amfe-flexible --save-dev2. 配置
（1）在 main.ts 导入依赖
import 'amfe-flexible/index.js'
（2）在项目根目录下编写配置文件 postcss.config.cjs
module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8","last 10 versions", // 所有主流浏览器最近10版本用],grid: true,},'postcss-px-to-viewport': {unitToConvert: 'px', // 需要转换的单位，默认为"px"viewportWidth: 1920, // 设计稿的视窗宽度unitPrecision: 6, // 单位转换后保留的精度propList: ['*'], // 能转化为 vw 的属性列表viewportUnit: 'vw', // 希望使用的视窗单位fontViewportUnit: 'vw', // 字体使用的视窗单位selectorBlackList: ['ignore-'], // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位minPixelValue: 1, // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换mediaQuery: false, // 媒体查询里的单位是否需要转换单位replace: true, // 是否直接更换属性值，而不添加备用属性exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件include: /\/src\//, // 如果设置了include，那将只有匹配到的文件才会被转换landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件landscapeUnit: 'vw', // 横屏时使用的单位landscapeWidth: 1920 // 横屏时使用的视窗宽度}}
}
3. 重启项目
【注】上述方案对行内样式不生效，行内样式中 px 转 vw 可使用自定义方法实现
1. 编写函数 utils/pxToVw.ts
/* 行内样式 px 转 vw */
export function pxToVw(px: number): string {const vw = (px / 1920) * 100; // 假设设计稿宽度为 1920 pxreturn `${vw}vw`;
}export function pxToVwFromString(pxString: string): string {const pxValue = parseFloat(pxString); // 提取数字部分return pxToVw(pxValue); // 调用 pxToVw 函数
}
2. 使用
对于方法1 pxToVw：
<div :style="{width: pxToVw(30)}"> test </div>对于方法2 pxToVwFromString：
<template><div :style="{width: widthVal}"> test </div></template><script setup lang="ts">const widthVal = computed(() => {let width: string = ''// width = 'calc(100vw - 427px)'width = '740px'width = width.replace(/\d+px/, match => pxToVwFromString(match)); // 替换 px 为 vwreturn width
})</script>参考文章：vue3+vite项目屏幕适配的两种方案，超详细！_vue3 vite rem-CSDN博客
