vue-cli4屏幕自适应

1.实现原理及运行环境

实现原理：vue编译时，将css的px单位修改为rem，实现屏幕自适应
vue/cli版本 4.5.6
amfe-flexible版本2.2.1
postcss-loader版本4.1.0
postcss-px2rem版本0.3.0

2.安装amfe-flexible模块

npm i -S amfe-flexible

3.安装postcss-px2rem

npm install -D postcss-loader
npm install -D postcss-px2rem

4.在main.js引入amfe-flexible

import 'amfe-flexible'

5.配置vue.config.js

css: {
    // css预设器配置项
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 128,//设计图的宽度/10 比如你的设计图是1920的宽度 这里你就1920/10=192
            remPrecision: 8//换算的rem保留几位小数点
          })
        ]
      }
    }
  },

注意：设置根据项目实际设置remUnit，比如你的设计图是1920的宽度 这里你就1920/10=192