vue2使用postcss-px-to-viewport 使vant的px变成rem

在Vue 2项目中使用`postcss-px-to-viewport`来将Vant UI库的px单位转换成rem单位，可以实现项目的适配性更好，尤其是在不同分辨率的屏幕上。以下是实现的步骤：

1. 安装`postcss-px-to-viewport`和`autoprefixer`。这两个插件可以帮助你将px单位转换成viewport单位，同时自动添加浏览器前缀。使用npm或者yarn来安装它们。

   npm install postcss-px-to-viewport autoprefixer --save-dev
   # 或者
   yarn add postcss-px-to-viewport autoprefixer --dev

2. 在项目的根目录创建或修改`postcss.config.js`文件，并配置`postcss-px-to-viewport`插件。你需要指定转换的视口宽度、单位和其它配置选项。以下是一个基本的配置示例：

   module.exports = {
     plugins: {
       // 先运行 autoprefixer 进行样式兼容性处理
       'autoprefixer': {
         browsers: ['Android >= 4.0', 'iOS >= 7']
       },
       // 再运行 px-to-viewport 自动将 px 转换成对应的视口单位
       'postcss-px-to-viewport': {
         viewportWidth: 375, // 视口宽度，通常是设计稿的宽度
         viewportHeight: 667, // 视口高度
         unitPrecision: 3, // 单位转换后保留的精度
         viewportUnit: 'rem', // 希望使用的视口单位
         selectorBlackList: [], // 需要排除的CSS选择器，不会转为视口单位
         minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
         mediaQuery: false, // 媒体查询里的单位是否需要转换单位
         exclude: /node_modules/i // 忽略 node_modules 下的文件
       }
     }
   };

3. 确保你的构建工具支持PostCSS。如果你使用的是Vue CLI创建的项目，Vue CLI已经包含了对PostCSS的支持。如果你使用的是Webpack，那么你需要在Webpack配置中加入对应的loader来处理CSS文件。

4. 重新启动你的开发服务器，这样`postcss-px-to-viewport`就会自动处理你的样式文件中的px单位。