vue移動端項目適配

這裏介紹使用lib-flexible插件去做適配，使用lib-flexible，給div設置了一個寬度（px），它會跟手機分辨率大小自動調節

1、安裝

npm install lib-flexible --save
npm install px2rem-loader --save

2、導入

在main.js中導入import 'lib-flexible/flexible'

3、配置

1) 找到build下的utils.js加入以下配置

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      //一般設置75 一般是設計稿除以10得到的值
      remUnit:  37.5 // 37.5按照375設計圖尺寸在設計，75安裝750設計圖尺寸設計
    }
  }

同樣在utils.js文件下找到generateLoaders方法，然後加入px2remLoader

2) 對於外部導入的css做配置，以然後再uitils.js中找到css-loader,添加一下配置

如果不添加以下配置，那麼@import導入的外部css將不能正常轉換

 const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      //默認是0
      importLoaders:2
    }
  }

在utils.js種的配置都要重啓vue才能生效

3) 在根目錄中的index.html中去除 viewport 的 meta 標籤，flexible會自動設置

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4、使用