vue 配置 postcss-px2rem

在Vue项目中配置postcss-px2rem可以实现样式单位的自动转换。以下是配置步骤和示例代码：

1. 安装postcss-px2rem：

npm install postcss-px2rem --save-dev

2. 在vue.config.js文件中配置postcss：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({
            remUnit: 37.5 // 设计稿宽度/10，通常设置为750的一半，即37.5
          })
        ]
      }
    }
  }
};

配置完成后，你可以在组件的<style>标签中或者外部样式文件中使用px单位，编译时会自动转换为rem单位。例如：

/* 组件内样式 */
<style lang="scss">
.example {
  width: 100px; /* 编译后会转换为 100rem/37.5 */
  height: 50px; /* 编译后会转换为 50rem/37.5 */
}
</style>

确保你的项目中已经有了vue.config.js文件，如果没有，你可以在项目根目录创建一个。这样配置后，你的Vue项目将自动使用postcss-px2rem进行样式单位的转换。