脚本宝典收集整理的这篇文章主要介绍了vue 使用lib-flexable，px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小，解决方案，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

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

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

来源

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

脚本宝典总结

以上是脚本宝典为你收集整理的vue 使用lib-flexable，px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小，解决方案全部内容，希望文章能够帮你解决vue 使用lib-flexable，px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小，解决方案所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。