关于Vue移动端项目（vant组件库）中使用postcss-pxtorem导致Vant组件样式生变化解决方案Vue项目中

本人在做Vue移动端项目时，搭配Vant组件库使用postcss-pxtorem与amfe-flexible。进行适配时候发现Vant组件库样式缩小与官方样式有着明显的差别。最后发现问题是postcss-pxtorem与Vant组件库冲突。经过调式后成功解决。解决办法如下

首先，我们使用vue-cli创建初始化的vue项目。

vue create vue-pro

因为我们是做移动端项目，所以就要使用postcss-pxtorem对移动端进行适配。安装命令如下。

npm install postcss-pxtorem

postcss-pxtorem还有一个搭配的伙伴amfe-flexible，也需要一起安装。安装命令如下。

npm install amfe-flexible

我们需要将原本的postcss-pxtorem卸载掉。

安装postcss-px2rem-exclude模块。安装命令如下。

npm install postcss-px2rem-exclude

完整这几项后还需要配置以下内容。在项目包的跟目录下创建postcss.config.js文件。配置内容如下。

module.exports = {
  plugins: [
      require('postcss-px2rem-exclude')(
          { 
              remUnit: 75 ,
              exclude: /node_modules/i
          }
      )

  ]
}

以上配置内容完成后，Vant组件库即可正常使用。