webpack手動構建vue和vue-cli構建使用 px2rem-loader ,全局自動轉換px單位,讓自適應來的更簡單點!

作移動端時，適配 是必須的。使用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官網的寫法

如上圖,咱們主要注意幾點

1. loader解析順序是按從右到左的方法解析的。
2. px2rem官網是沒有帶後綴.loader,webpack2.0以後是沒容許的，因此這邊咱們要加上後綴。
3. scss文件首先要把scss轉成正常的css，在交給px2rem.loader來作，因此是外還須要加上一個sass-loader
4. 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'

3) 安裝px2rem-loader

npm install px2rem-loader

4).配置px2rem-loader

在build下的 utils.js中，找到generateLoaders 方法，在這裏添加 。

安裝配置結束後，重啓項目 。而後再瀏覽器中查看。會發現本身設置的px被轉爲rem 了。

願你成爲終身學習者