关于vue的rem布局及引入post2rem无法将px转换成rem问题的解决方法

vue中rem布局方法

一 : 自己封装

1. 在vue项目文件夹assets新建js目录中rem.js，写入如下代码

function setRem () {
  const html = document.querySelector('html')
  const width = document.documentElement.clientWidth
  html.style.fontSize = width / 10 + 'px'
}
setRem()
window.onorientationchange = setRem
window.onresize = setRem

getBoundingClientRect 可以用在移动端获取屏幕尺寸
html: 1rem 75px
500px 500/75=6.667 

2. 在mian.js引入
import “./assets/js/rem”

3. 在css预处理中定义一个边浪 （是根据设计图的宽度的10分之一） 如750设计图 75
@rem: 75rem;
#box{width:500/@rem;}

二: 引入插件

1. npm i -S amfe-flexible
2. main.js引入 import “amfe-flexible”
3. npm i postcss-px2rem -D

在post-css配置文件中 使用插件（根据你配置 可能在package.json中也可以独立的配置文件中）
packa.json中引入如下代码：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude": {
        "remUnit": 75
      }
    }
  }

但是会有个问题无法将px成功转换成rem ！
我们只需要将postcss-px2rem卸载然后重新安装postcss-px2rem-exclude就可以了，操作如下：
npm uninstall postcss-px2rem --save-dev
npm install postcss-px2rem-exclude --save

package.json中引入如下代码即可解决：

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude": {
        "remUnit": 75,
        "exclude": "/node_modules|floder_name/i"
      }
    }
  }