vue-cli引入手淘移動端適配解決方案

安裝lib-flexible,使用命令行

npm i lib-flexible --save

引入lib-flexible，在項目入口文件main.js中引入lib-flexible

import 'lib-flexible'

添加meta標籤，在項目根目錄的index.html中添加以下標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0">

若是僅僅是引入該方案的話，固然是知足不了需求，咱們須要將px轉換成rem再寫進樣式中。咱們使用webpack的loader：px2rem-loader

安裝px2rem-loader，使用以下命令

npm i px2rem-loader --save-dev

配置px2rem-loader

在vue-cli生成的webpack配置中，vue-loader的options和其餘樣式文件loader最終都是由bulid/utils.js裏的一個方法生成的。

咱們只須要在cssLoader後再加上一個px2remLoader便可，px2rem-loader的remUnit選項的意思是1rem=多少像素，結合lib-flexible的方案，咱們將px2remLoader的options.remUnit設置成設計稿寬度的1/10，這裏咱們假設設計稿寬度爲750px。

而後將px2remLoader放進loaders數組中