vue2项目postcss.config.js配置，将px转化成rem

依赖包：postcss-pxtorem

配置：如下有三种不同方案进行配置（最好搭配最后面的rem.js文件进行使用）

方案一、在项目根目录下创建 postcss.config.js

配置如下：

module.exports = () => ({
  plugins: [
    require("autoprefixer")(),
    // require("postcss-px2rem")({ remUnit: 75 })
    require("postcss-pxtorem")({
      rootValue: 65,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ["*"]
    })
  ]
})

• rootValue （Number）根元素字体大小。
• unitPrecision （数字）允许REM单位增长的十进制数。
• propList （数组）可以从px更改为rem的属性。
  • 值必须完全匹配。
  • 使用通配符*启用所有属性。例：[‘*‘]
  • *在单词的开头或结尾使用。（[‘*position*‘]会匹配background-position-y）
  • 用于!与属性不匹配。例：[‘*‘, ‘!letter-spacing‘]
  • 将“not”前缀与其他前缀组合在一起。例：[‘*‘, ‘!font*‘]
• selectorBlackList （数组）要忽略的选择器并保留为px。
  • 如果value是string，则检查selector是否包含字符串。
    • [‘body‘] 会匹配 .body-class
  • 如果value是regexp，它会检查选择器是否与正则表达式匹配。
    • [/^body$/]会匹配body但不会.body
• replace （布尔值）替换包含rems的规则，而不是添加回退。
• mediaQuery （布尔值）允许在媒体查询中转换px。
• minPixelValue （数字）设置要替换的最小像素值。

方案二、 在vue.config.js单独配置

module.exports = {
  //编译打包存放的目录默认dist
  outputDir: 'dist',

  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: false,

  // 设为false打包时不生成.map文件
  productionSourceMap: false,

  assetsDir: 'static',
  css: {
    loaderOptions: {
      css: {},
      postcss: {
        plugins: [
          // 补全css前缀(解决兼容性)
          require("autoprefixer")(),
          // 把px单位换算成rem单位
          require("postcss-pxtorem")({
            rootValue: 32, // 换算的基数(设计图750的根字体为32)
            selectorBlackList: [".van", ".my-van"],// 要忽略的选择器并保留为px。
            propList: ["*"], //可以从px更改为rem的属性。
            minPixelValue: 2 // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
          })
        ]
      }
    }
  },

  devServer: {
    port: 8080,
    // proxy: {/**处理跨域，本地代理转发*/
    //     '/internal': {
    //         target: 'http://192.168.2.75:9501/',  // 接口域名
    //         secure: false,  // 如果是https接口，需要配置这个参数
    //         changeOrigin: true,  //是否跨域}
    //     },
    // },
  }
}

方案三、 在package.json单独配置

{
  "name": "projectName",
  "version": "0.1.0",
    "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 32,
        "selectorBlackList": [".van",".my-van"],
        "propList": ["*"],
        "minPixelValue": 2
      }
    }
  },
"browserslist": [  "> 1%",  "last 2 versions",  "not ie <= 8",  "ios >= 8",  "android >= 4.0"]
}

需要在main.js文件中引入下面的rem.js文件

import '.utils/rem.js'

rem.js文件

// 宽度示例使用的是平板ipad宽度，可根据不同场景自己定义
(function (win) {
    "use strict";

    win.resize = {};

    var timer = null;
    var rem = 12;
    var doc = win.document;
    var docEl = doc.documentElement;

    /**
     * 刷新页面REM值
     */
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        // width = width > 768 ? 640 : width;
        width = width > 768 ? 768 : width;
        rem = width / 7.68;
        docEl.style.fontSize = rem + 'px';
    }

    /**
     * 页面缩放或重载时刷新REM
     */
    win.addEventListener('resize', function () {
        clearTimeout(timer);
        timer = setTimeout(refreshRem, 100);
    }, false);
    win.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            clearTimeout(timer);
            timer = setTimeout(refreshRem, 100);
        }
    }, false);

    // 解决font-size过大导致间距不正常，必须指定body字号为12px
    if (doc.readyState === 'complete') {
        doc.body.style.fontSize = '12px';
    } else {
        doc.addEventListener('DOMContentLoaded', function (e) {
            doc.body.style.fontSize = '12px';
        }, false);
    }

    refreshRem();

    /**
     * rem to px
     * @param d
     * @returns {number}
     */
    resize.rem2px = function (d) {
        console.log('rem2px------', d)
        var val = parseFloat(d) * rem;
        if (typeof d === 'string' && d.match(/rem$/)) {
            val += 'px';
        }
        return val;
    };

    /**
     * px to rem
     * @param d
     * @returns {number}
     */
    resize.px2rem = function (d) {
        console.log('px2rem------', d)
        var val = parseFloat(d) / rem;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    };

})(window);