Vue移动端适配方案(webstorm)

安装lib-flexible并引入

在webstorm命令行Terminal中安装lib-flexible

npm install lib-flexible --save

在项目入口函数main.js中引入lib-flexible

import 'lib-flexible'

在index.html文件中修改meta标签

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

安装并配置px2rem-loader

在webstorm命令行Terminal中安装px2rem-loader

npm install px2rem-loader --save-dev

在build/util.js中配置
添加：

 const px2remLoader = {
    loader:'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

修改：

function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader,px2remLoader, postcssLoader] : [cssLoader,px2remLoader]

加入rem适配代码

index.html中加入以下JavaScript代码

  (function () {
        var elementStyle = document.createElement("style");
        var width = document.documentElement.clientWidth/16;
        elementStyle.innerHTML = 'html{font-size:'+width+'px!important}';
        document.head.appendChild(elementStyle);
   })();

代码:

浏览器查看：

注：对外部引入css，px2rem能不能转换rem问题
如：通过@import方式引入的外部css不能转为rem
解决方法：
通过style标签 的src引入