vuecli3 自适应pc端界面

// 1.安装依赖
npm install lib-flexible --save-dev
npm i postcss-px2rem --save

// 2.在main.js内引用
import 'lib-flexible'

// 3.在vue.config.js内配置
// 其中的remUnit是根据设计稿自定义，设计稿尺寸/10
module.exports = {
  lintOnSave: false,
 
  configureWebpack: {},
 
  chainWebpack: () => {},
 
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          require("postcss-px2rem")({
            remUnit: 136.6
          })
        ]
      }
    }
  }
};

4.修改flexible.js配置
node_moudles/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;
  }