vue开发页面自适应屏幕尺寸（仅供参考）

1. 介绍

在日常开发时，避免不了屏幕适配的问题，而vue开发的页面都是通过px设置它的尺寸，如果换了一个不同尺寸的屏幕就会出现页面排版错乱，显示不完整等情况。下面介绍一种解决办法，通过插件将px装换为rem单位从而适应不同尺寸的屏幕。

2. 插件介绍

• lib-flexible插件作用是根据rem调整页面宽高，自适应屏幕尺寸

• px2rem-loader插件作用是将px单位转换为rem单位，lib-flexible插件才能根据rem调整网页宽高尺寸。

第一步：安装插件

# 安装lib-flexible插件
npm i lib-flexible

# 安装px2rem-loader插件 
npm i  px2rem-loader

第二步：全局配置插件

//在main.js文件中引用lib-flexible插件
// 引用lib-flexible插件
import "lib-flexible"

// 在vue.config.js中配置px2rem-loader
module.exports = {
  configureWebpack: {
    // webpack 配置
    output: {
      filename: ,
      chunkFilename: `,
    },
  },
  // 配置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
      });
  },
}

第三步：配置flexible.js

//根据路径找到该文件：node_modules/lib-flexible/flexible.js
function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            // 将width = 540 * dpr; 540改为width
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

最后重启服务即可（仅供参考，有不对的地方，还望理解。。。。）