vue2配置postcss-px-to-viewport

在Vue2中配置postcss-viewport可以实现将px单位自动转换为vw或者vh单位，从而适配不同屏幕尺寸的设备。下面是配置的步骤：

1. 首先，安装相关依赖：

   npm install postcss-px-to-viewport --save-dev

2. 在项目根目录下找到postcss.config.js文件（如果没有则新建），并添加以下配置：

   module.exports = {
     plugins: {
       'postcss-px-to-viewport': {
         viewportWidth: 750,  // 设计稿宽度
         viewportHeight: 1334,  // 设计稿高度，可以不指定
         unitPrecision: 3,  // 转换后的精度，保留小数点位数
         viewportUnit: 'vw',  // 转换的单位
         selectorBlackList: ['.ignore', '.hairlines'],  // 不需要转换的类名
         minPixelValue: 1,  // 最小转换的像素值
         mediaQuery: false  // 是否允许在媒体查询中转换px
       }
     }
   }

上述配置中，`viewportWidth`和`viewportHeight`分别表示设计稿的宽度和高度，`unitPrecision`表示转换后保留的小数点位数，`viewportUnit`表示转换的单位（这里使用vw），`selectorBlackList`表示不需要转换的类名，`minPixelValue`表示最小转换的像素值，`mediaQuery`表示是否允许在媒体查询中转换px。

3. 在项目的入口文件（一般是main.js）中引入postcss配置：

   import 'postcss-px-to-viewport'

这样就完成了postcss-px-to-viewport的配置。