Vue中使用postcss-px-to-viewport插件实现PC端兼容

1、安装 postcss-px-to-viewport

npm install postcss-px-to-viewport -save

2、配置 package.json文件

"postcss": { 
 "plugins": {
    "autoprefixer": {},
    "postcss-px-to-viewport": {
      "viewportWidth": 1920, // 设计稿宽度
      "unitPrecision": 5, // px转换后的小数保留位数，有时候不能整除
      "minPixelValue": 1, // 小于或等于`1px`时不转换为视窗单位
      "mediaQuery": false   // 允许在媒体查询中转换，默认为false
    }
  }}

3、其他配置可以自行查询如下列属性等

 mediaQuery: false,   // 允许在媒体查询中转换，默认为false
    propList: ["*"],   // 转化为vw的属性列表
    viewportUnit: "vw",   // 指定转换的单位
    fontViewportUnit: "vw",   // 字体使用的单位 
   selectorBlaskList: [".ignore-"],    // 指定不需要转换的类