Vue页面自适应（px插件转rem）

适用于以px为单位的可视化大数据自动转为rem，其他页面自行调试对比
安装依赖：

npm i lib-flexible -S
npm i px2rem-loader -D

将node_modules/lib-flexible/flexible.js文件复制到utils文件下，然后在main.js中按路径引用

import './utils/flexible'

要做到根据屏幕尺寸自适应，将复制的js文件中540改成width即可

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

在vue.config.js中配置px2rem-loader

chainWebpack: config => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem")
      .loader("px2rem-loader")
      .options({
      // 设置px转化为rem比例，设计稿大小为1920，比例 1920/ 10
        remUnit: 192
      });
  },

配置完成重启项目即可