參考資料
1.基于vue-cli配置移動端自適應
2.vue.js移動端配置flexible.js
源頭
前期弄好了vue的大概隘竭，要開始寫靜態(tài)頁面饰及，按照正常流程扣泊，我需要些css，html瘩绒，但是大家都知道，移動端頁面和電腦端不一樣妻往，需要適配胀茵，打算直接引用flexible.js，但是實際上我還不知道怎么引用胁后。所以百度出了上述的參考資料店读，達到我的目的。
步驟
第一攀芯，配置 flexible
安裝lib-flexible --在命令行中運行如下安裝
npm install lib-flexible --save
引入lib-flexible --在命令行中安裝完成之后屯断，需要在項目中引入lib-flexible
引入地址：項目入口文件中main.js
引入方式：import 'lib-flexible'
添加meta標簽 --在項目根目錄index.html中添加meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
引入lib-flexible.js后，我們就能愉快的適配啦侣诺！但是不要忘記殖演，我們在寫css的時候，在看設計稿的時候年鸳，習慣是用px作為單位的趴久，所以，下一步搔确，我們需要把px轉(zhuǎn)換rem在寫入樣式中彼棍。灭忠。。
根據(jù)這次的百度座硕，我才只有有px2rem這個工具弛作；使用的是webpack的loader：px2rem-loader
第二，px轉(zhuǎn)rem
安裝px2rem-loader
在命令行中運行如下安裝
npm install px2rem-loader --save-dev
配置px2rem-loader
1.配置地點：
2.配置：我們只需在 cssLoader 后再加上一個 px2remLoader 即可华匾，px2rem-loader 的 remUnit 選項意思是 1rem=多少像素缆蝉，結(jié)合 lib-flexible 的方案，我們將 px2remLoader 的 options.remUnit 設置成設計稿寬度的 1/10瘦真，這里我們假設設計稿寬為 750px刊头。
2-1，.importLoaders:2：參考資料中有寫诸尽，但是后期我去除這個的時候沒有發(fā)現(xiàn)有什么異常原杂。但是為了保險還是寫了，估計是我還沒有外部的css文件吧您机，穿肄，，
表示在css-loader前應用的loader的數(shù)目际看，默認為0咸产；如果不加這個，@import的外部css文件將不能正常轉(zhuǎn)換仲闽，如果還不行脑溢，試著調(diào)大數(shù)字。
2-2赖欣，將 px2remLoader 的 options.remUnit 設置成設計稿寬度的 1/10屑彻，這里我們假設設計稿寬為 750px。
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}
3.放進 loaders 數(shù)組中
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader,postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
兩個px2remLoader一定要寫６ニ薄Ｉ缟！不然不起作用
第三悴了，檢查安裝后的變化搏恤，重啟項目
1.項目中新添加的
2.目前沒有外部css文件，css樣式目前寫在頁面中：
最后
重啟項目后的前后變化
轉(zhuǎn)載自http://www.reibang.com/p/3a660fcf868b
