vue项目使用插件postcss-px2vwh将px转vw wh

您可以使用此插件将“ px”转换为“ vw”或“ vh”。

1. 首先:

安装插件 : postcss-px2vwh

npm i postcss-px2vwh

2. 配置文件:
   vue项目根目录下建 .postcssrc.js文件
   赋值以下代码:

module.exports = {
    plugins: [
        require('@moohng/postcss-px2vw')({
            width: 375,                    //你的 psd's width
            height: 667,                   //你的 psd's height
            reg: /\/h5\/[a-zA-Z0-9]*.vue$/  //您将转换哪个文件正则匹配
        }),
    ]
}

完成例子:

div{
    width:192vw;
    height:108vh;
    border:1px solid grey;
}
//编译后
div{
    width:10vw;
    height:10vh;
    border:1px solid grey;
}

插件npm网址链接:https://www.npmjs.com/package/postcss-px2vwh#vue-cli3-vueconfigjs
如此简单你OK了吗