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()引用你所需要的轉換單位插件，且一般只引用一個