解决vant-ui变小的问题

原创已于 2023-03-22 09:58:29 修改 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #html5 #vue.js #npm

于 2021-06-18 18:00:02 首次发布

本文介绍了解决Vant UI组件在项目中显示过小的问题，通过更换rem插件并调整配置最终实现正常显示。

解决vant-ui变小的问题

我们公司有个项目，使用的是rem布局+elmentui 。由于需要动很多页面，想快捷开发，于是vantUI，but 事与愿违，使用vant中的组件时发现字体和样式都很小。于是要解决啊，百度良久，终于结合百度上的答案和项目中的实际情况解决了问题。记录一下解决问题的过程

注意首先查找项目中package.json中引入的什么rem插件

首先要看一下项目中引入的是什么rem插件，因为vant的官方是有推荐使用的rem的。很不幸公司的项目引入的是px2rem-loader。走了很多坑，想着px2rem-loader怎么兼容vant，然后。。。。。失败了。那就暴力一点跟着vant官方走喽。卸载px2rem-loader。可以在package.json中直接删除，也可以使用命令

npm uninstall px2rem-loader

使用postcss-pxtorem

npm install postcss-pxtorem

别忘记更新哦

npm install

有可能会报错，大概率是rem的版本太高了，跟当前的环境不匹配，所以降低一下rem版本

npm install postcss-pxtorem@5.1.1

再次更新运行项目，发现vant组件仍然很小，那是因为vant使用的是px的布局，所以在这个项目中需要把vant的组件过滤一下，不实用rem布局。在.postcssrc.js中添加过滤

'postcss-pxtorem':{
      　　　rootValue:72,
      　　　propList:['*'],
 　　　　　　selectorBlackList:['van']
    }

最后别忘记去掉utils.js中关于px2remLoader的rem适配哦。到此适配结束、
可能出现的问题：
1、一系列操作做完发现问题仍然存在
清除node_modules、清除cache

rm -rf node_modules
rm package-lock.json 
npm cache clear --force

2、MAC 系统没有问题，但是Windows系统运行报错
检查一下package.json中插件引入的顺序，有可能是顺序导致的

最后祝大家，工作开心哦～～