vue cli 3.0安裝配置移動端自適應插件(postcss-pxtorem)

1.下載lib-flexible，並在main.js中引用

npm i lib-flexible --save

2.安裝自適應插件

npm i postcss-pxtorem --save

或

npm i postcss-px-to-viewport --save

3.修改vue.config.js配置文件（若項目中沒有新建一個）

module.export = {
  lintOnSave: true,
  css: {
      loaderOptions: {
          postcss: {
              plugins: [
                  require('postcss-px-to-viewport')({ //配置項，詳見官方文檔
                      viewportWidth: 750, // 視窗的寬度，對應的是咱們設計稿的寬度，通常是750.
                      viewportHeight: 1334, // 視窗的高度，根據750設備的寬度來指定，通常指定1334.
                      unitPrecision: 3, // (指定`px`轉換爲視窗單位值的小數位數（不少時候沒法整除). 
                      viewportUnit: 'vw', // 指定須要轉換成的視窗單位，建議使用vw. 
                      selectorBlackList: ['.ignore', '.hairlines','van'], // 指定不轉換爲視窗單位的類，能夠自定義，能夠無限添加,建議定義一至兩個通用的類名.
                      minPixelValue: 1, // 小於或等於`1px`不轉換爲視窗單位，你也能夠設置爲你想要的值. 
                      mediaQuery: false // 容許在媒體查詢中轉換`px`.
                  }), // 換算的基數
              ]
          }
      }
  },  
}

備註：require()引用你所須要的轉換單位插件，且通常只引用一個