vue 使用postcss-px2rem-exclude完美解决移动端适配的问题

一、安装postcss-px2rem-exclude

npm install postcss-px2rem-exclude --save

二、配置 postcss-px2rem-exclude

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {},
    "postcss-px2rem-exclude": {  // 添加的代码
      remUnit: 75,
      exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
    }
  }

　　

然后重新npm run dev，打开控制台可以看到代码中的px已经被转成了rem

注意：

    1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem

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

问题：为什么要 忽略node_modules目录下的文件？

答：有时候我们在手机端项目的时候需要导入第三方UI库，例如：VUX,MINT等，这时你就会发现第三方的组件样式都变小了，变小的主要原因是第三库 css一依据 data-dpr="1" 时写死的尺寸，我们使用的flexible引入时 data-dpr不是一个写死了的，是一个动态的，就导致这个问题。

这里就不再修改第三方的UI样式，直接忽略掉，简单直接实用。

相关代码：https://github.com/hwq888/skeleton  可以参考使用