vue cli4 使用 postcss-px-to-viewport 实现vw适配

1. 安装 postcss-px-to-viewport
   

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

2. 在项目的根目录下创建一个 postcss.config.js 文件

   module.exports = {
     plugins:{
       autoprefixer:{},
       "postcss-px-to-viewport": {
          viewportWidth: 375,   //视窗的宽度，对应的是我们设计稿的宽度
          viewportHeight: 667,  //视窗的高度，对应的是我们设计稿的高度 (也可以不设置)
          unitPrecision: 5,     //制定'px’转换为视窗单位的小数位数（很多时候无法整除）
          viewportUnit: 'vw',   //指定需要转换成的视窗单位，建议使用vw
          selectorBlackList: [  //指定不需要转换的类
            'ignore',
            'tab-bar',
            'tab-bar-item',
            'nav-bar',
            'cart-buttom-bar',
            'content'
          ],
          minPixelValue: 1,     //小于或等于'1px’不转换为视窗单位
          mediaQuery: false,    //允许在媒体查询中转换为'px’
       },
     }
   }

3. 运行项目 npm run serve 即可