在同一个vue项目中，写pc和移动端页面，用postcss-px-to-viewport做移动端适配

在一个vue项目中，同时写pc端页面和移动端页面。 其中移动端页面要做移动端适配，而pc端页面不需要

安装依赖postcss-px-to-viewport

npm install postcss-px-to-viewport@1.1.1 --save-dev

配置postcss.config.js文件

设置exclude，将不需要转换的文件夹写在里面。（pc端涉及的都写里面）

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      unitToConvert: 'px', // 需要转换的单位，默认为"px"
      viewportWidth: 750, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ['*'], // 能转化为 vw 的属性列表
      viewportUnit: 'vw', // 希望使用的视口单位
      fontViewportUnit: 'vw', // 字体使用的视口单位
      selectorBlackList: [], // 需要忽略的 CSS 选择器
      minPixelValue: 1, // 最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
      mediaQuery: false, // 是否在媒体查询中也进行转换
      replace: true, // 是否直接更换属性值，而不添加备用属性
      exclude: [
        /node_modules/,
        /src[\\/]assets/,
        /src[\\/]components/,
        /src[\\/]views\/pc/,
      ], // 忽略某些文件夹下的文件或特定文件
      include: [], // 如果设置了 include，那将只有匹配到的文件才会被转换
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw', // 横屏时使用的单位
      landscapeWidth: 1125 // 横屏时使用的视口宽度
    }
  }
}

遇到的问题：

设置了exclude中的文件夹。但mac看到的样式是正常的，部署后也是正常的。windows的看到的样式有问题，似乎并没有设置这个似的。

修改之前是： /src\/components/,

用的 \/

解决方法：改为 [\\/]

改为：/src[\\/]components/,

这样就兼容windows系统了。mac、windows、部署后就都可以了。