单页面开发PC端（Vue+Element）和移动端（Vue+Vant的H5）项目踩坑记录

遇到的问题（一）

由于这个项目是和我们的一个PC端的项目是放在一个服务器上的，并且这个PC端的项目框架之前一个人做的有一些问题，导致我没能实现多页面开发，H5页面和PC的页面共用一个index.html，在实现H5的rem布局时，费了老大劲。各位都知道，rem单位是基于html标签的font-size为基准，但是PC项目和H5项目共用一个.html势必会产生影响。开始我用的Vant文档中建议使用的Rem适配插件（postcss-pxtorem，lib-flexible），具体的可以去官方文档看下。开始的时候，我设置html的font-size为16px（浏览器默认的，为了不影响PC页面布局），但控制台有一个不可更改的element.style{font-size:36px}（Rem插件有最小值得限制？不晓得什么鬼…），PC和H5页面各种混乱。（我提议新建一个项目来做，因为两个项目完全没关系，后期还都要迭代，领导说后端新搭建服务器费时间…）

问题分析

因为使用Rem适配插件在根目录下的babel.config.js文件中进行了配置，不管怎么PC端项目和移动端H5都会相互影响，所以，我向朋友借用了他们公司自己封装的一个适配的js文件并在index.html中进行了引入，这相当于做了全局引入，所以也失败了。
然后我尝试在我的H5项目的单文件组件中进行import…的按需加载，按道理讲应该是可以成功的（因为我是用的时候才加载你的适配文件），可是，这时控制台却报了这个按需加载的js的错，导致页面都加载不出来。
然后我仔细研究了朋友公司封装的适配js代码，发现rem适配实现主要是由一个函数实现的，我就将这个函数单独拿了出来，放到了h5项目vue组件中的mounted生命钩子中，哈哈，问题解决。

分享

最后我分享一下这个函数：
mounted(){
var docEl = document.documentElement;
if (window.dschannel == “pc”) {
window.rem = docEl.getBoundingClientRect().width / 3.75;
} else {
window.rem = docEl.getBoundingClientRect().width / 3.75;
}
docEl.style.fontSize = window.rem + “px”;
}
说明：我的设计稿宽度是375的，所以我选择window.rem = docEl.getBoundingClientRect().width 除以3.75，等于就是100px为1rem。
举个栗子：我量取设计稿中某个盒子的宽高分别是100px*150px,我在写这个盒子的rem单位时，就写成width:1rem;height: 1.5rem;就可以啦！

未完待续！