vue2+vant2 使用rem进行浏览器适配

根据VANT官方说明,需要在项目中安装两个插件即可。

如果需要使用 rem 单位进行适配,推荐使用以下两个工具:postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位 lib-flexible 用于设置 rem 基准值

但是昨天在安装使用的时候,出了问题。提示错误,打开项目页面也是空白了。于是百度了下,发现网络上的文章都是抄袭。基本没有解决问题,经过一番折腾后发现是postcss这个插件的版本高了,目前如果不指定版本号安装基本都是安装的是6+以上版本。导致项目不能识别其标识错误!
需要指定其版本号进行安装,如5.1.1
npm i postcss-pxtorem@5.1.1
接着安装lib-flexible
安装完成后,在main.js中引入
import "amfe-flexible"
然后在项目的根目录下新建.postcss.js文件(网上很多人说在安装完插件后会自动生成,但是我这里没有。)
然后在其中写入:
module.exports = { "plugins": { "autoprefixer": { "browsers": ["Android >= 4.0","iOS >= 8"] }, "postcss-pxtorem": { "rootValue": 37.5, "propList": ["*"] } } }

重启服务,即可看到原本PX单位全部变成了rem单位了!
【vue2+vant2 使用rem进行浏览器适配】发现VUE安装完插件依赖后,导致项目无法启动或是启动后空白。基本都是插件的版本过高引起的,注意下!

    推荐阅读