vue 行内样式 px 单位 转换为 vw

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 = /