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、使用