移動端適配，引入lib-flexible,vue開發中將px轉化為rem

一、下載lib-flexible

npm install lib-flexible --save

二、引入lib-flexible

　　在main.js中引入

import 'lib-flexible/flexible'

三、設置meta標簽

　　設置設備寬度以及縮放比例等

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

四、安裝px2rem-loader

npm install px2rem-loader --save-dev

五、配置px2rem-loader

　　在build文件中的util.js，將px2rem-loader添加到cssLoaders中(中間是添加的內容)

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
 // 這里是添加的內容,配置rem適配
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }
  
  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

　　　在build文件中的util.js，generateLoaders方法中添加px2remLoader

// generate loader string to be used with extract text plugin
  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
        })
      })
    }

六、在終端中重啟項目

　　成功啟動項目后，在瀏覽器控制台中會出現。

flexible.js?b156:13 將根據已有的meta標簽來設置縮放比例