vue2 

安装 插件  npm i style-vw-loader --save

vue.config.js 文件配置

module.exports = {chainWebpack: (config) => {config.module.rule('vue').test(/\.vue$/).use('style-vw-loader').loader('style-vw-loader').options({unitToConvert: "px",//需要转换的单位viewportWidth: 1920,//设计稿的宽度unitPrecision: 5,//转换单位的小数位数viewportUnit: "vw",fontViewportUnit: "vw",minPixelValue: 1,})}
}

在vite 中使用 

创建 stylePxToVw.ts 文件

// 默认参数
let defaultsProp = {unitToConvert: "px",//需要转换的单位viewportWidth: 1920,//设计稿的宽度unitPrecision: 5,//转换单位的小数位数viewportUnit: "vw",fontViewportUnit: "vw",minPixelValue: 1,
};
function toFixed(number:any, precision:any) {var multiplier = Math.pow(10, precision + 1),wholeNumber = Math.floor(number * multiplier);return (Math.round(wholeNumber / 10) * 10) / multiplier;
}function createPxReplace(viewportSize:any,minPixelValue:any,unitPrecision:any,viewportUnit:any
) {return function ($0:any, $1:any) {if (!$1) return;var pixels = parseFloat($1);if (pixels <= minPixelValue) return;return toFixed((pixels / viewportSize) * 100, unitPrecision) + viewportUnit;};
}
const templateReg = /