Vue amfe-flexible+px2rem-loader+postcss-px2rem-exclude 界面自适应方案

最近项目是大屏+移动端的VUE开发项目，上面说也要适应PC端，但当初设计并没有考虑这种适配，因此在不大动代码的情况下，采用手淘的界面适配方案，刚开始查到lib-flexible，但已经不维护了，转而采用amfe-flexible+px2rem-loader，其原理就是将px转化为rem,达到适配效果。

1. 安装

    npm install px2rem-loader amfe-flexible  postcss-px2rem-exclude --save

2.配置

 在main.js中添加：

import 'amfe-flexible/index.js'

   针对于本项目，在根目录下.postcssrc.js添加

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-px2rem-exclude": {
      remUnit: 192,
      exclude: /node_modules|mobile/i
    }
  }
}

3.参数说明

    remUnit：是基准数据，举例：若设计稿的宽为1920，则该数值为192

    exclude：不对px进行转化的目录；举例说明：/node_modules|mobile/i 是node_modules下的文件和mobile目录下的文件css不进行转化；

4.其他说明

 因为本项目采用的了大屏和移动端两种分辨率，而原生remUnit只能设一个，看了其他博客，适配两种规则需要修改源码，考虑项目维护等问题，因此退而求其次，只适配大屏，手机端界面排除在外，手机端用原来的自适应，因为手机端库用了element-ui等，所以node_modules下文件也需排除，否则会影响手机端界面样式。

如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了,或者将px写成PX。

总结，大屏2k和4k以及PC端适配良好，还是很方便。