px转vw和rem配置-vue-行内样式px转vw和rem-----项目中无需出现rem单位；

前端适配-px转-rem；

​ 最近在做一个pc端的后台管理系统，项目一期一批次已开发完毕，因为一批次没有适配要求，所以大框架时没有使用rem，业务现在又提出加入低分辨率适配；

​ 苦思冥想后决定还是百度吧，网上有很多的博客和文章，但试了很多都不能实现；经过一段时间摸索，最后总算是ok了；

此次配置使用的插件为 @moohng/postcss-px2vw

​ 使用 ：npm i @moohng/postcss-px2vw --save 即可下载；

配置：项目根目录新建一个 postcss.config.js 文件；

module.exports = {
    plugins: {
        '@moohng/postcss-px2vw': {
            // rootValue: 100,  // 可不填写 默认先转为vm 浏览器不支持的话才会为rem (此处为参考html字号)
            viewportWidth: 1536,//填入设计图宽度
        }
    }
}

打包后依然没有问题；

但是：but

这个方法有一个小问题，就是无法识别行内样式

​ 所以就找了另一个插件，可以用loader来进行解析；

插件：style-vw-loader；

​ 下载命令 npm i style-vw-loader --save;

配置：在 vue.config.js 中进行配置即可；

module.exports = {
    publicPath: "./",
    //配置loader
    chainWebpack: (config) => {
        config.module
            .rule('vue')
            .test(/\.vue$/)
            .use('style-vw-loader')
            .loader('style-vw-loader')
            .options({
                viewportWidth: 1536,//传参
            })
    }
  //配置loader
}

复制 //配置loader 里面的内容即可；

按着步骤来，复制粘贴即可；（使用的是@vue.cli3,并且 style-vw-loader 插件只支持vue）

如果需要react的可以在插件源码中进行修改；

​