這篇文章主要介紹了基於vue-cli配置lib-flexible rem實現移動端自適應,需要的朋友可以參考下
安裝flexible
#npm install lib-flexible --save
引入flexible
在專案入口檔main.js中加入如下程式碼，引入flexible
import 'lib-flexible'
px 轉rem
#使用webpack 的px2rem-loader,自動將px轉換為rem
安裝px2rem-loader
npm install px2rem-loader --save-dev
設定px2rem-loader
#在vue- cli產生的檔案中,找到以下檔案build/utils.js,如下圖新增設定
關於importLoaders：如若有疑問，請參考webpack深入與實戰4-4
2017.12.8更新說明：是否需要設定importLoaders，可參考最底部的說明。
px2rem 用法
安裝px2rem後，再使用px上有些不同，大家可以參考px2rem官方介紹，以下簡單介紹一下。
直接寫px，編譯後會直接轉換成rem ---- 除開下面兩種情況，其他長度用這個
在px後面加上/*no*/，不會轉化px，會原樣輸出。 --- 一般border需用這個
在px後面加上/*px*/,會依照dpr的不同，產生三套程式碼。 ---- 一般字體需用這個
範例程式碼
編譯前（自己寫的程式碼）
.selector {
width: 150px;
height: 64px; /*px*/
font-size: 28px; /*px*/
border: 1px solid #ddd; /*no*/
}編譯後（打包後的程式碼）
.selector {
width: 2rem;
border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
height: 32px;
font-size: 14px;
}
[data-dpr="2"] .selector {
height: 64px;
font-size: 28px;
}
[data-dpr="3"] .selector {
height: 96px;
font-size: 42px;
}重啟項目，就可以愉快的用設計稿上的px了。
注意：坑
不能在index.html的頭部加上 name 為 viewport 的 meta 標籤，flexible會自動為我們添加！
更新：對外部引入css，px2rem能不能轉換rem問題
2017.12.8更新：在實際運用中發現對於外部引入的css文件，有時px2rem能正常轉換，有時候又不能轉換，到底是什麼原因呢？試驗了三種不同的css引入情況，發現第一種能正常轉換，二三不能正常轉換，至於原因，由於才疏學淺，還是不懂，求大神解答三種引入方式的區別。
如果明白了這些方法，就沒必要再配置cssLoader的importLoaders了，因為下面的方法更容易控制外部引入的css是否需要轉rem，而更改importLoaders就控制不了了，它會強制轉換。
<style src='../assets/style.css'> /* px2rem能正常转换 */ </style> <style> /* px2rem不能正常转换 */ @import '../assets/style.css'; </style> <style> /* px2rem不能正常转换 */ @import url('../assets/style.css'); </style>
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
在vue-cli webpack中如何引入jquery（詳細教程）
#以上是在vue-cli中如何實現行動端自適應的詳細內容。更多資訊請關注PHP中文網其他相關文章！
