vue-cli3.0結合lib-flexible、px2rem實現移動端適配，完美解決第三方ui庫樣式變小問題

公司最近做的一個移動端項目從搭框架到前端開發由我獨立完成，以前做移動端適配用的媒體查詢，這次想用點別的適配方案，然后就采用了vue-cli3.0結合lib-flexible、px2rem實現移動端適配的方案，開發過程中也遇到一些坑，自己選的方案自己填坑吧。以下記錄我的項目框架搭建及填坑方案。

搭建可以參考我的另一篇文章vue-cli 3.0 搭建項目流程，這里就不再另外說明了。下面說明項目搭建成功后的適配方案。

第一部分：項目中引入lib-flexible

一、項目中安裝lib-flexible

npm install lib-flexible --save

二、在項目的入口main.js文件中引入lib-flexible

import 'lib-flexible'

第二部分：使用postcss-px2rem自動將css中的px轉換成rem

一、安裝postcss-px2rem (一定看完文章再安裝不然你會哭o(╥﹏╥)o)

npm install postcss-px2rem --save-dev

二、項目配置postcss

項目開始我是在vue.config.js（項目創建完初始是沒有這個js文件的，需要自己手動創建）中配置的，上代碼

module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            // 這是rem適配的配置  注意： remUnit在這里要根據lib-flexible的規則來配制，如果您的設計稿是750px的，用75就剛剛好。
             plugins: [
              require("postcss-px2rem")({
                remUnit: 75
          })
        ]
      }
    }
}

初始的適配方案就完成了，然后可以直接在css或.vue文件中寫已px為單位的樣式了，到瀏覽器會自動轉為rem。

因為前期項目安排不是太趕，ui給的設計圖也相對簡單，所以自己寫了按鈕組件之類的，適配還挺好，覺得自己棒棒噠~

直到ui的后續設計圖出現時間插件，然后就引入了vant的組件庫。

放了一個簡單的cell組件，npm run serve項目跑起來，我想哭o(╥﹏╥)o，組件中的樣式都變小了，F12看了一下果然組件的樣式也都被轉換成了rem。

問題

變小的主要原因是第三庫 css一依據 data-dpr="1" 時寫的尺寸

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

這時我們使用的flexible引入時 data-dpr不是一個寫死了的，是一個動態的；就導致這個問題

然后就各種查解決方案，網絡上給的解決方案一個是改寫第三方庫的樣式，還有一個就是讓flexible不編譯第三方庫的文件（忽略ui組件庫的樣式文件）。

解決方案一：

將第三方組件的css文件復制出來第三方庫的css代碼px統一擴大2倍，或者用全局替換將px替換為px/*no*/。我覺的這個方案不太好沒有采用，具體操作可以參考以下兩篇文章：https://segmentfault.com/a/1190000014575890 和 https://blog.csdn.net/weixin_42464312/article/details/82769805。

解決方案二：

使用postcss-px2rem-exclude，網上好多說用這個方法不起作用，經過一個下午的折騰才發現是使用方法不對，我的錯誤方法就不跟你們說了，直接來正確的。

首先，需要卸載項目中的postcss-px2rem。

npm  uninstall postcss-px2rem --save-dev

其次，安裝postcss-px2rem-exclude

npm  install postcss-px2rem-exclude --save

最后是配置exclude選項，需要注意的是這個配置在vue.config.js中式不起作用的，如圖。

正確的配置位置是項目根目錄下的postcss.config.js文件，如果你的項目沒有生成這個獨立文件，就需要在你的package.js里設置。

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,
      exclude: /node_modules|folder_name/i
    }
  }
};

package.json "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-px2rem-exclude":{
          "remUnit": 75,
          "exclude":"/node_modules|floder_name/i"
      }
    }
  },

ok，完成。

以上就是我這個項目的填坑經歷，希望對你有用，能少走點彎路 o(*^＠^*)o