Vue项目下页面自适应pc端不同分辨率自适应

做屏幕自适应，主要的就是使用rem布局。为了方便我们的快速应用，直接使用插件
需要用到：
1、lib-flexible插件，引入 lib-flexible插件，使 用lib-flexible 会根据设备的尺寸动态计算出HTML标签的 font-size 值,从而使得 rem 的计算能够自适应的进行调整
2、postcss-px2rem、px2rem-loader插件，作用为把px转变为rem

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

首先在main.js中引用：（可以使用npm下载，也可以直接下载文件，我这边是下载的文件）

//屏幕适配分辨率
import "@/utils/flexible.js"

// npm 引用则使用
// import 'lib-flexible'

接着在vue.config.js文件中配置基准大小

// 屏幕适配
const px2rem = require("postcss-px2rem")
// 配置基本大小
const postcss = px2rem({
  //配rem基准值 基准大小 baseSize
  remUnit: 192,// 设稿尺1920/10
})

别忘了在vue.config.js文件中的chainWebpack中配置

  chainWebpack(config) {
    config.module.rule("css").test(/\.css$/).oneOf("vue").use("px2rem-loader").loader("px2rem-loader").options({
      remUnit: 192,
    }).end();
  }
css: {
    loaderOptions: {
      postcss: {
        plugins: [postcss]
      }
    }
  }

然后爽快的用起来！