17.vue实现PC端分辨率适配（vue脚手架3）

1.安装依赖

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

2.进入 main.js

import 'lib-flexible/flexible'

3.根目录新建 vue.config.js 文件（配置px2rem）

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 75
          })
  }
}

4.找到flexible.js文件看下：

既然文件把屏幕宽度写死了，那就不写死：
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;
  }