postcss-px-to-viewport 使用在vue2

postcss-px-to-viewport 是一个 PostCSS 插件，用于将 px 单位转换为 vw 或 vh 单位，以实现在不同设备上的自适应布局。它可以与 Vue2 一起使用，以下是使用 postcss-px-to-viewport 的步骤：

1. 首先，在项目中安装 postcss-px-to-viewport 插件。可以使用 npm 或 yarn 进行安装：

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

或

   yarn add postcss-px-to-viewport --dev

2. 在项目根目录下创建一个名为 postcss.config.js 的文件，并添加以下配置：

   module.exports = {
     plugins: {
       'postcss-px-to-viewport': {
         viewportWidth: 750,  // 设计稿的宽度
         viewportHeight: 1334, // 设计稿的高度
         unitPrecision: 3,    // 转换后的小数位数
         viewportUnit: 'vw',  // 转换的单位
         selectorBlackList: ['.ignore'], // 需要忽略的 CSS 类名
         minPixelValue: 1,    // 最小转换单位值
         mediaQuery: false    // 是否允许在媒体查询中转换 px
       }
     }
   }

3. 在项目的 build/webpack.base.conf.js 文件中找到 postcss 配置项，并将其修改为：

   module.exports = {
     // ...
     postcss: [
       require('postcss-px-to-viewport')()
     ],
     // ...
   }

4. 重新启动项目，此时 postcss-px-to-viewport 插件会自动将 CSS 中的 px 单位转换为 vw 或 vh 单位，实现自适应布局。