本篇文章主要介紹了詳解基於vue-cli配置移動端自適應，現在分享給大家，也給大家做個參考
之前寫過一篇關於移動端屏幕適配：移動端螢幕適配的解決，今天來聊聊基於vue-cli配置的行動端螢幕適配問題。
配方還是一樣：手淘的lib-flexible rem
配置flexible
安裝lib-flexible
在命令列中執行如下安裝：
npm i lib-flexible --save
引入lib-flexible
在專案入口檔main.js 裡引入lib-flexible
// main.js import 'lib-flexible'
新增meta 標籤
在專案根目錄的index.html 中加入如下meta
px 轉rem
#實際開發中，我們透過設計稿得到的值單位是px，所以要將px 轉換成rem 再寫進樣式中。
將px 轉換成rem 我們將使用px2rem 這個工具，它有webpack 的loader：px2rem-loader
安裝px2rem-loader
#在在命令列中執行以下安裝：
npm i px2rem-loade --save-dev
設定px2rem-loade
在vue-cli 產生的webpack 設定中，vue-loader 的options 和其他樣式檔案loader最終都是由build/utils.js 裡的一個方法產生的。
我們只要在cssLoader 後面再加上一個px2remLoader 即可，px2rem-loader 的remUnit 選項意思是1rem=多少像素，結合lib-flexible 的方案，我們將px2remLoader 的options.remUnit 設定成設計稿寬度的1/10，這裡我們假設設計稿寬為750px。
// utils.js var cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 } } // ...
並放進loaders 數組中
// utils.js function generateLoaders(loader, loaderOptions) { var loaders = [cssLoader, px2remLoader] // ...
修改配置後需要重啟，然後我們在組件中寫單位直接寫px，設計稿量多少就可以寫多少了，舒服多了。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是使用vue-cli如何設定行動端自適應？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
