vue适配不同电脑分辨率(vue3.x)

1、安装插件

第一个是一种弹性布局方案，第二个插件是px转成rem的插件

npm i lib-flexible -S

npm i px2rem-loader -D

2、安装完成后在node_modules中查找flexible.js文件,将代码修改为适应PC 端的代码

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;
    }

3、在项目的根目录下面新建一个js文件

4、添加如下代码：

module.exports = {
  // configureWebpack: {
  //   externals: {
  //     "BMap": "BMap"
  //   }
  // },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // 把px单位换算成rem单位
          require("postcss-pxtorem")({
            rootValue: 75, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: [".van"],// 要忽略的选择器并保留为px。
            propList: ["*"], //可以从px更改为rem的属性。
            minPixelValue: 2 // 设置要替换的最小像素值。
          })
        ]
      }
    }
  }
}

5、重新npm run一下
对于不想被转换的样式，可在其对应css后添加/no/保证不被转换