做移動端時，適配 是必須的。使用rem單位，可在不同螢幕上完美顯示相同的佈局。px2rem 外掛方便的將px單位轉為了rem。
1. 自己手動構建vue webpck配置
我們在開發過程中，我們在css檔案中，直接按設計稿，直接以px畫素為單位，然後在真正的應用中，我們想讓px自動轉製為rem單位，那這個要怎麼讓構建工具自動轉換呢？
大家想一下，我們的構建工具，其實最主要還是來自vue，vue這個檔案中我們使用了vue-loader,那如果說你使用了vue-cli腳手架的話，那麼你想增加這個功能，並不簡單，但是我們手工打造構建工具，就不受限制，想怎麼用就怎麼用，按照剛才的思路，我們知道，所有的檔案幾乎是vue檔案，所有的loader是vue-loader。
在webpack配置，我們一個檔案可以使用多個loader, 我們使用vue-loader也可以用其它loader，那怎麼用呢？這就要去看vue官方文件了。
這邊我為大家找到這個文件
通過官方文件，我們可以瞭解到，要使用sass-loader,要需要在vue-loader中，增加一個options進行相應的配置就可以使用對應的loader了。
我們現在要做的是能自動將px轉換成rem,所以跟這也有相似類，只要我們將轉換的loader新增進行就可以了，那能將px自動轉換成rem是哪個loader呢？
那我們要怎麼找呢？當我們不會的時候，可以到npm.js官網，然後可以猜想一到輸入px, rem,一回車就可以看到
從圖中我們可以看到有個px2rem2-loader，下面還有一個px2rem，我們直接搜尋px2rem
這種loader有多個，平常我們用的比較多的還是px2rem，所以這邊 就介紹px2rem，其它loader可以自行研究噢！點選進去我們可以發現
裡面有介紹我們怎麼安裝，以及怎麼引入，我們可以模仿vue官網的寫法
如上圖,我們主要注意幾點
- loader解析順序是按從右到左的方法解析的。
- px2rem官網是沒有帶字尾.loader,webpack2.0之後是沒允許的，所以這邊我們要加上字尾。
- scss檔案首先要把scss轉成正常的css，在交給px2rem.loader來做，所以是外還需要加上一個sass-loader
- remUnit: 750//設計稿寬度/10,remPrecision:表示轉換過程小數保留幾位。
2. 使用vue-cli構建px2rem.loader
1）.下載lib-flexible
我使用的是vue-cli+webpack，所以是通過npm來安裝的
npm i lib-flexible --save
複製程式碼2）引入lib-flexible
在main.js中引入lib-flexible
import 'lib-flexible/flexible'
複製程式碼- 安裝px2rem-loader
npm install px2rem-loader
複製程式碼4).配置px2rem-loader
在build下的 utils.js中，找到generateLoaders 方法，在這裡新增 。
安裝配置結束後，重啟專案 。然後再瀏覽器中檢視。會發現自己設定的px被轉為rem 了。
願你成為終身學習者