Vue3 PC端自适应

安装依赖包

npm i lib-flexible --save
npm install px2rem-loader

引入 

在main.js中引入

import "lib-flexible/flexible"

修改flexible.js文件

在项目下的node_modules\lib-flexible路径找到flexible.js文件进行修改

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

根目录新建 vue.config.js 文件

将以下代码粘贴到vue.config.js中，重启项目即可查看效果

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 192 //稿子宽度的1/10，此处我的项目为1920，根据实际情况修改
          })
  }
}