vue-cli3.0結(jié)合lib-flexible穆律、px2rem實現(xiàn)移動端適配，完美解決第三方ui庫樣式變小問題 公司最近做的一個移動端項目從搭框架到前端開發(fā)由我獨立完成导俘，以前做移動端適配用的媒體查詢峦耘，這次想用點別的適配方案，然后就采用了vue-cli3.0結(jié)合lib-flexible旅薄、px2rem實現(xiàn)移動端適配的方案辅髓，開發(fā)過程中也遇到一些坑，自己選的方案自己填坑吧。以下記錄我的項目框架搭建及填坑方案利朵。
搭建可以參考我的另一篇文章vue-cli 3.0 搭建項目流程律想，這里就不再另外說明了。下面說明項目搭建成功后的適配方案绍弟。
第一部分：項目中引入lib-flexible
一技即、項目中安裝lib-flexible
npm install lib-flexible --save 二、在項目的入口main.js文件中引入lib-flexible
import 'lib-flexible' 第二部分：使用postcss-px2rem自動將css中的px轉(zhuǎn)換成rem
一樟遣、安裝postcss-px2rem (一定看完文章再安裝不然你會哭o(╥﹏╥)o)
npm install postcss-px2rem --save-dev 二而叼、項目配置postcss
項目開始我是在vue.config.js（項目創(chuàng)建完初始是沒有這個js文件的，需要自己手動創(chuàng)建）中配置的豹悬，上代碼
復(fù)制代碼 module.exports = { css: { loaderOptions: { postcss: { // 這是rem適配的配置 注意： remUnit在這里要根據(jù)lib-flexible的規(guī)則來配制葵陵，如果您的設(shè)計稿是750px的，用75就剛剛好瞻佛。 plugins: [ require("postcss-px2rem")({ remUnit: 75 }) ] } } } 復(fù)制代碼 初始的適配方案就完成了脱篙，然后可以直接在css或.vue文件中寫已px為單位的樣式了，到瀏覽器會自動轉(zhuǎn)為rem伤柄。
因為前期項目安排不是太趕绊困，ui給的設(shè)計圖也相對簡單，所以自己寫了按鈕組件之類的适刀，適配還挺好秤朗，覺得自己棒棒噠~
直到ui的后續(xù)設(shè)計圖出現(xiàn)時間插件，然后就引入了vant的組件庫笔喉。
放了一個簡單的cell組件取视，npm run serve項目跑起來，我想哭o(╥﹏╥)o常挚，組件中的樣式都變小了作谭，F(xiàn)12看了一下果然組件的樣式也都被轉(zhuǎn)換成了rem。
問題
變小的主要原因是第三庫 css一依據(jù) data-dpr="1" 時寫的尺寸
這時我們使用的flexible引入時 data-dpr不是一個寫死了的奄毡，是一個動態(tài)的丢早；就導(dǎo)致這個問題
然后就各種查解決方案，網(wǎng)絡(luò)上給的解決方案一個是改寫第三方庫的樣式秧倾，還有一個就是讓flexible不編譯第三方庫的文件（忽略ui組件庫的樣式文件）怨酝。
解決方案一： 將第三方組件的css文件復(fù)制出來第三方庫的css代碼px統(tǒng)一擴大2倍，或者用全局替換將px替換為px/no/那先。我覺的這個方案不太好沒有采用农猬，具體操作可以參考以下兩篇文章：segmentfault.com/a/119000001… 和 blog.csdn.net/weixin_4246…
解決方案二： 使用postcss-px2rem-exclude，網(wǎng)上好多說用這個方法不起作用售淡，經(jīng)過一個下午的折騰才發(fā)現(xiàn)是使用方法不對斤葱，我的錯誤方法就不跟你們說了慷垮，直接來正確的。 首先揍堕，需要卸載項目中的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里設(shè)置。
復(fù)制代碼 postcss.config.js
module.exports = { plugins: { autoprefixer: {}, "postcss-px2rem-exclude": { remUnit: 75, exclude: /node_modules|folder_name/i } } }; 復(fù)制代碼 復(fù)制代碼 package.json
"postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem-exclude":{ "remUnit": 75, "exclude":"/node_modules|floder_name/i" } } }, 復(fù)制代碼 ok囊蓝，完成饿悬。
以上就是我這個項目的填坑經(jīng)歷，希望對你有用聚霜，能少走點彎路 o(＠)o
