vuecli3 如何配置 px2rem-loader

要在 Vue CLI 3 中使用 `px2rem-loader`，可以按照以下步骤进行配置：

1. 安装 `px2rem-loader` 和 `postcss-loader`：

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

2. 在项目根目录下创建一个 `postcss.config.js` 文件，并添加以下代码：

   module.exports = {
     plugins: {
       'postcss-px2rem': {
         remUnit: 75  // 设置 1rem 等于 75px
       }
     }
   }

3. 在 `vue.config.js` 文件中添加 `css.loaderOptions.postcss` 配置项：

   module.exports = {
     css: {
       loaderOptions: {
         postcss: {
           plugins: [
             require('postcss-px2rem')({
               remUnit: 75  // 设置 1rem 等于 75px
             })
           ]
         }
       }
     }
   }

4. 在组件中的样式中使用 px 单位，`px2rem-loader` 会自动将其转换为 rem 单位。

需要注意的是，`px2rem-loader` 只会转换 `.css` 或 `.less` 等样式文件中的 px 单位，如果你在 `.vue` 文件中的 `style` 标签中使用了 px 单位，也需要进行转换。如果你使用了 `sass` 或 `scss` 等预处理器，需要安装对应的插件并按照它们的要求进行配置。