vue项目配置postcss.config.js文件，px转rem自适应屏幕

在Vue项目中，可以使用PostCSS插件来实现将px单位转换为rem单位，从而实现自适应屏幕。下面是配置postcss.config.js文件的步骤：

1. 安装相关的依赖包：

npm install postcss-pxtorem postcss-import --save-dev

其中，postcss-pxtorem用于将px单位转换为rem单位，postcss-import用于处理@import语句。

2. 在项目根目录下创建postcss.config.js文件，内容如下：

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-pxtorem': {
      rootValue: 16, // 根字体大小
      propList: ['*'], // 所有属性都转换
      selectorBlackList: [], // 不进行转换的选择器
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

将根字体大小设置为16，也就是1rem等于16px。propList选项用于指定需要转换的属性，*表示所有属性都需要转换。selectorBlackList选项用于指定不需要转换的选择器，这里我们将其设置为空数组。replace选项用于指定是否替换原有的px值，默认为true，表示需要替换。mediaQuery选项用于指定是否在媒体查询中也进行转换，默认为false，表示不进行转换。minPixelValue选项用于指定需要转换的最小像素值，默认为0。

3. 在项目的入口文件（一般是main.js）中引入postcss-import插件：

import 'postcss-import'

4. 在样式文件中使用px单位，插件会自动将其转换为rem单位：

div {
  font-size: 24px;
  margin: 10px 20px;
}

这里的font-size和margin属性中的px单位会被自动转换为rem单位。