解决vue移动端适配问题

解决vue移动端适配问题

1.首先把安装amfe-flexible，这里使用npm install

npm  install -S amfe-flexible

2.在入口文件中引入

import 'amfe-flexible/index.js'

3.在根目录的index.html 的头部加入手机端适配的meta代码

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

4.安装px2rem-loader，这里使用npm install
作用：在开发过程中把px转化rem，前提是ui设计的psd图尺寸大小是750*1334，这样我们在iphone6的模拟机上直接使用所标注的尺寸，在浏览器中px2rem-loader插件会把px自动转化为rem。安装命令如下
 

npm install px2rem-loader

5.px2rem-loader的配置
在build文件夹中的utils.js中添加：

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

然后在下面的generateLoaders方法当中，修改：

const loaders = [cssLoader,px2remLoader]

5.好了，现在重新运行vue，npm run dev 就可以了。