【Vue】大漠vw移动端适配与 vant 集成导致 vant组件缩小如何解决？

Z时代
2024-01-10
分类：技术分享

问题描述

vw移动端适配方案与vant集成时会修改vant组件样式，讲vant的css中px转换为vw,导致组件缩小，效果如下图
，集成框架是参考了大漠大神的vw适配文章 https://www.w3cplus.com/mobil...
【Vue】大漠vw移动端适配与 vant 集成导致 vant组件缩小如何解决？与 vant 官方文档 https://youzan.github.io/vant...

问题出现的环境背景及自己尝试过哪些方法

vant 提供的适配方案是 postcss-pxtorem,参考https://blog.csdn.net/perryli...
尝试配置了下 postcssrc.js ，无法解决问题本项目是为了将小程序迁移至公众号，迁移周期只有一个月，希望在迁移过程中直接将wxss 中 rpx 替换成 px 样式就可以不用再改动，这样才有可能按时完成，望各位大神指点，

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
package.json中导入的包如下
"dependencies":{

    "ajv":"^6.10.0",
"axios":"^0.17.1",
"babel-polyfill":"^6.26.0",
"dayjs":"^1.6.7",
"fastclick":"^1.0.6",
"flex.css":"^1.1.7",
"fuse.js":"^3.2.1",
"jquery":"^3.3.1",
"js-cookie":"^2.2.0",
"lodash":"^4.17.11",
"lowdb":"^1.0.0",
"node-sass":"^4.11.0",
"nprogress":"^0.2.0",
"postcss-aspect-ratio-mini":"^1.0.1",
"postcss-cssnext":"^3.1.0",
"postcss-px-to-viewport":"^1.1.0",
"postcss-write-svg":"^3.0.1",
"sass-loader":"^7.1.0",
"ua-parser-js":"^0.7.19",
"vant":"^1.6.12",
"vue":"^2.5.2",
"vue-awesome-swiper":"^3.1.3",
"vue-router":"^3.0.1",
"vuex":"^3.0.1",
"vuex-persistedstate":"^2.5.4",
"weixin-js-sdk":"^1.4.0-test"
},

.postcssrc.js中的配置如下
module.exports = {

"plugins":{
"postcss-import":{},
"postcss-url":{},
"postcss-aspect-ratio-mini":{},
"postcss-write-svg":{
utf8:false
},
"postcss-cssnext":{},
"postcss-px-to-viewport":{
viewportWidth:750,
viewportHeight:1334,
unitPrecision:3,
viewportUnit:'vw',
selectorBlackList:['.ignore','.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue:1, // (Number) Set the minimum pixel value to replace.
mediaQuery:false // (Boolean) Allow px to be converted in media queries.
},
"cssnano":{
preset:"advanced",
autoprefixer:false,
"postcss-zindex":false
}}

}

你期待的结果是什么？实际看到的错误信息又是什么？

希望通过配置 postcssrc.js 可以让导入vant的组件样式单位不进行转换，或者无法解决时直接可以更换成类似微信小程序的框架进行，望推荐下框架

回答

使用 postcss-px2rem-exclude ，本质也是postcss，只是多了一个exclude配置，在postcss.config.js里配置

module.exports = {
    "plugins": {
    "autoprefixer": {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }}

单位转换的时候就会过滤掉node-modules里的第三方依赖包。

修改 .postcsssrc.js 中关于 postcss-px-to-viewport 的 selectorBlackList忽略转换的配置可解决问题，配置如下

module.exports = {
    "plugins":{
        "postcss-import":{},
        "postcss-url":{},
        "postcss-aspect-ratio-mini":{},
        "postcss-write-svg":{
            utf8:false
        },
        "postcss-cssnext":{},
        "postcss-px-to-viewport":{
            viewportWidth:750,
            viewportHeight:1334,
            unitPrecision:3,
            viewportUnit:'vw',
            selectorBlackList:['.ignore','.hairlines','van'], // (Array) The selectors to ignore and leave as px. 
            minPixelValue:1, // (Number) Set the minimum pixel value to replace. 
            mediaQuery:false // (Boolean) Allow px to be converted in media queries. 
        },
        "cssnano":{
            preset:"advanced",
            autoprefixer:false,
            "postcss-zindex":false
        }
    }
}