vue cli3.x以上版本搭配vant配置postcss-pxtorem和lib-flexible

1.下載包

npm install lib-flexible --save
npm install postcss-pxtorem --save-dev

2.在main.js,加入以下代碼

import "lib-flexible/flexible.js";

3.在public/index.html裏,刪除<meta name=“viewport” …>
原因:

lib-flexible會自動在html的head中添加一個meta name="viewport"的標籤，同時會自動設置html的font-size爲屏幕寬度除以10，也就是1rem等於html根節點的font-size。假如設計稿的寬度是750px，此時1rem應該等於75px。假如量的某個元素的寬度是150px，那麼在css裏面定義這個元素的寬度就是 width: 2rem
注意：
1.檢查一下html文件的head中，如果有 meta name=“viewport” 標籤，需要將他註釋掉，因爲如果有這個標籤的話，lib-flexible就會默認使用這個標籤。而我們要使用 lib-flexible 自己生成的 meta name=“viewport” 來達到高清適配的效果。
2.因爲 html 的 font-size 是根據屏幕寬度除以 10 計算出來的，所以我們需要設置頁面的最大寬度是10rem。
3.如果每次從設計稿量出來的尺寸都手動去計算一下rem，就會導致我們效率比較慢，還有可能會計算錯誤，所以我們可以使用px2rem-loader自動將css中的px轉成rem
（該段摘錄於：https://blog.csdn.net/yanzhi_2016/article/details/80461951
）

如圖:

4.新建vue.config.js,加入以下代碼

module.exports = {
  outputDir: "dist",
  publicPath: process.env.NODE_ENV === "production" ? "/vant-demo/" : "/",
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-pxtorem")({
            rootValue: 75, // 換算的基數,數值具體看你的設計稿 另外提醒下vant-UI的官方根字體大小是37.5
            selectorBlackList: [".van"], // 忽略轉換正則匹配項
            propList: ["*"]
          })
        ]
      }
    }
  }
};