Vue 项目中，可以使用 postcss-pxtorem 插件将 px 单位自动转换为 rem 单位

在 Vue 项目中，可以使用 postcss-pxtorem 插件将 px 单位自动转换为 rem 单位。以下是具体步骤：

安装 postcss-pxtorem 插件：

npm install postcss-pxtorem -D

配置 postcss.config.js 文件，在该文件中添加 postcss-pxtorem 插件：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16, // rem 相对于 px 转换的基准值
      propList: ['*'], // 需要转换的 CSS 属性，* 表示全部
      unitPrecision: 5 // 转换后的小数位数
    }
  }
}
在项目中引入 postcss.config.js 文件：
~~~js

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        config: {
          path: './postcss.config.js'
        }
      }
    }
  }
}

这样配置后，项目中的 CSS 文件中的 px 单位就会自动转换为 rem 单位。例如，如果 rootValue 设置为 16，则 1px 会转换为 0.0625rem。