vue2使用px2rem-loader插件

Vue2中使用`px2rem-loader`插件是为了实现响应式设计，特别是在移动端，将CSS中的像素值（px）转换为等比的rem单位。这个插件通常在Webpack配置文件中使用，它会在构建过程中自动处理CSS中的像素数值，使其相对于html的根元素font-size动态调整。

以下是使用步骤：

1. 首先，你需要安装`postcss-import`, `postcss-loader`, 和 `px2rem-loader` 插件。在项目目录下运行：

   npm install postcss-import postcss-loader px2rem-loader --save-dev

2. 然后，在Webpack配置文件（如`vue.config.js`或`.webpackrc.js`) 的`module.rules`部分添加px2rem-loader规则：

   module.exports = {
     //...
     chainWebpack(config) {
       config.module
         .rule('px2rem')
         .test(/\.css$/)
         .use('px2rem')
         .loader('px2rem-loader')
         .options({
           remUnit: 75, // 设置基准字体大小，例如75px对应1rem
         });
     }
   };

3. 接下来，要在CSS中使用`px`前缀，会被转换成`rem`。例如：

   .my-element {
     width: 10px; /* 这会被转换为 rem */
   }

4. 重启服务，Webpack会应用新的设置，你的CSS样式就会基于设置的基准值进行rem转换了。