vue px to vw

第一步安装：

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S 

第二步配置.postcssrc.js：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false }, 
    "postcss-cssnext": {}, 
    "postcss-px-to-viewport": { 
        unitToConvert: 'px',
        viewportWidth: 750, // (Number) The width of the viewport. 
        viewportHeight: 1334, // (Number) The height of the viewport. 
        unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to. 
        viewportUnit: 'vw', // (String) Expected units. 
        selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px. 
        minPixelValue: 1, // (Number) Set the minimum pixel value to replace. 
        mediaQuery: false, // (Boolean) Allow px to be converted in media queries. }, 
        "postcss-viewport-units":{}, 
        "cssnano": { 
            preset: "advanced", 
            autoprefixer: false, 
            "postcss-zindex": false 
        }
    }
  }
}
 

* 由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。 

参考链接：https://www.w3cplus.com/mobile/vw-layout-in-vue.html