vue中实现PC端适配

文章主要是参考https://blog.youkuaiyun.com/weixin_41257563/article/details/97266234改写的

自适应方案核心： 阿里可伸缩布局方案 lib-flexible

px转rem：px2rem，它有webpack的loader px2rem

安装依赖包

npm i lib-flexible -save
npm i postcss-px2rem -save

main.js文件引用

// main.js
import 'lib-flexible'

在node_modules包里找到lib-flexible文件夹下的flexible.js文件

修改其中的宽度，将宽度改为当前文档的宽度

![在这里插入图片描述](https://img-blog.csdnimg.cn/39a5bb4fb11b4bde88dbf3879170e86a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Iuf5Yas5paw,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

function refreshRem(){
      var width = docEl.getBoundingClientRect().width;
      if (width / dpr > 540) {
          width = width * dpr;
      }
      var rem = width / 10;
      docEl.style.fontSize = rem + 'px';
      flexible.rem = win.rem = rem;
  }

然后在vue.config.js配置中引用对应的文件配置

最后重启项目