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

最新推荐文章于 2024-09-25 17:27:20 发布

原创

最新推荐文章于 2024-09-25 17:27:20 发布 · 3.2k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #android #ios #less

本文记录了一个Vue+Element开发的PC端项目和Vue+Vant的H5移动端项目共用同一个index.html时，如何处理REM布局问题的踩坑过程。在尝试使用postcss-pxtorem和lib-flexible等解决方案失败后，作者通过在Vue组件的mounted钩子中动态计算并设置html字体大小，成功实现了适配。分享的解决方法可能对遇到类似问题的开发者有所帮助。

遇到的问题（一）

由于这个项目是和我们的一个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