vue使用libflexable，px2rem进行移动端适配但是引入的第三方UI组件vux的样式缩小，解决方案...

最近在写移动端项目,就想用lib-flexable&＃xff0c;px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后在一个vue开发群里找到了解决的方法,目前的处理方法是将vux组件中px转化为PX&＃xff0c;避免被转成rem

可以参考一下这篇文章vue中的适配&＃xff1a;px2rem

在webpack.base.conf.js中 vuxLoader中配置以下代码

{name: &＃39;vux-ui&＃39;
},
{name: &＃39;after-less-parser&＃39;,fn: function (source) {if (this.resourcePath.replace(/\\/g, &＃39;/&＃39;).indexOf(&＃39;vux/src/components&＃39;) > -1) {source &＃61; source.replace(/px/g, &＃39;PX&＃39;)}// 自定义的全局样式大部分不需要转换if (this.resourcePath.replace(/\\/g, &＃39;/&＃39;).indexOf(&＃39;App.vue&＃39;) > -1) {source &＃61; source.replace(/px/g, &＃39;PX&＃39;).replace(/-1PX/g, &＃39;-1px&＃39;)}return source}
},
{name: &＃39;style-parser&＃39;,fn: function (source) {if (this.resourcePath.replace(/\\/g, &＃39;/&＃39;).indexOf(&＃39;vux/src/components&＃39;) > -1) {source &＃61; source.replace(/px/g, &＃39;PX&＃39;)}// 避免转换1PX.less文件路径if (source.indexOf(&＃39;1PX.less&＃39;) > -1) {source &＃61; source.replace(/1PX.less/g, &＃39;1px.less&＃39;)}return source}
}


如果是使用cnpm的 就需要把/vux/components那段 要改成vux/components

使用vue-cli 3.x的,在vue.config.js 配置以下代码

configureWebpack: config &＃61;> {require(&＃39;vux-loader&＃39;).merge(config, {plugins: [{name: &＃39;vux-ui&＃39;},{name: &＃39;after-less-parser&＃39;,fn: function (source) {if (this.resourcePath.replace(/\\/g, &＃39;/&＃39;).indexOf(&＃39;/vux/src/components&＃39;) > -1) {source &＃61; source.replace(/px/g, &＃39;PX&＃39;)//资源中有引入1px.less文件的&＃xff0c;上面也会将文件名替换成1PX.less&＃xff0c;所以要替换回来避免构建报错source &＃61; source.replace(/1PX.less/g,&＃39;1px.less&＃39;);}// 自定义的全局样式大部分不需要转换return source}},{name: &＃39;style-parser&＃39;,fn: function (source) {if (this.resourcePath.replace(/\\/g, &＃39;/&＃39;).indexOf(&＃39;/vux/src/components&＃39;) > -1) {source &＃61; source.replace(/px/g, &＃39;PX&＃39;)source &＃61; source.replace(/1PX.less/g,&＃39;1px.less&＃39;);}return source}}]})
}


来源

** https://github.com/airyland/v... , 此方法是vux作者提供的解决方法

原文地址&＃xff1a;https://segmentfault.com/a/1190000016866076