postcss-plugin-px2rem cli3 pc手机端配置

postcss-plugin-px2rem是一个PostCSS插件，用于将CSS中的px单位转换为rem单位，以实现适配不同屏幕尺寸的效果。cli3指的是Vue.js的脚手架工具，用于构建Vue项目的基础结构。PC和手机端的配置指的是在使用cli3构建Vue项目时，如何配置postcss-plugin-px2rem插件来处理PC和手机端的样式适配。

首先，需要在package.json文件中添加postcss-plugin-px2rem插件的依赖。

然后，在项目的根目录下，创建一个postcss.config.js的文件，用于配置postcss-plugin-px2rem插件的选项。

配置文件的内容如下：

module.exports = {
  plugins: [
    require('postcss-plugin-px2rem')({
      remUnit: 75, // rem单位的基准值
      exclude: /node_modules/i, // 排除node_modules目录下的文件
      mediaQuery: false, // 是否转换@media查询中的px
      minPixelValue: 2 // 小于指定数值的px不转换为rem
    })
  ]
}

在配置文件中，我们设置了remUnit的值为75。这意味着在设计稿中，1px将被转换为0.01333rem（1/75=0.01333）。

我们还设置了exclude选项，用于排除node_modules目录下的文件，因为通常我们不希望对第三方库的样式进行转换。

mediaQuery选项用于确定是否转换@media查询中的px单位。

minPixelValue选项用于确定小于指定数值的px单位是否转换为rem。

最后，在cli3的配置文件vue.config.js中，添加postcss插件的配置，如下：

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

以上配置将使postcss-plugin-px2rem插件在构建Vue项目时自动应用于CSS文件。

通过以上的配置，我们就可以在cli3构建的Vue项目中使用postcss-plugin-px2rem插件来实现PC和手机端的样式适配了。