vue项目实现pc端的屏幕适配

1.首先下载第三方插件

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

2.在根目录下面找到该文件

 3.更改flexible.js 中的源码

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // 或者
        if (width / dpr > 540) {
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

 又或者：根据自己的屏幕宽度的需求来调整if里面的判断

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    // if (width / dpr > 540) {
    //     width = 540 * dpr;
    // }
    if (width / dpr < 810) {
      width = 810 * dpr;
    }
    if (width / dpr < 1300) {
      width = 1300 * dpr;
    }
    if (width / dpr < 1920) {
      width = 1920 * dpr;
    }
      if (width / dpr < 2560) {
      width = 2560 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + "px";
    flexible.rem = win.rem = rem;
  }

4.更改好源码以后，在全局文件main.js中引用

import 'lib-flexible'

5.配置插件（如果我们直接在vue.config.js中配置的话，重启项目会报一个 plugins的错误，所以我们可以在根目录下新建一个文件：postcss.config.js）

// // 引入等比适配插件
const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcss = px2rem({
  // 配置rem基准值 基准大小 baseSize
  remUnit: 192 // 基于1920的设计稿/10
})
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('css')
      .test(/\.css$/)
      .oneOf('vue')
      .use('px2rem-loader')
      .loader('px2rem-loader')
      .options({
        remUnit: 192, // 基于设计稿的十分之一
        remPrecision: 8 // rem保留几位小数
      })
      .end()
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      }
    }
  }
}