vue2.0移动端配置flexible.js

最新版vue-cli,配置手淘的lib-flexible.js和rem实现移动端页面自适应

1.安装flexible.js

cnpm install lib-flexible --save
复制代码

2.main.js引入

import 'lib-flexible'
复制代码

3.px转rem,首先我们来安装

cnpm install px2rem-loader --save-dev
复制代码

4.配置px2rem-loader

首先找到 build/utils.js文件，在utils.js中添加如下配置

importLoaders:2
复制代码

然后在generateLoaders函数里配置

const px2remLoader = {
 loader: 'px2rem-loader',
 options: {
  remUnit:75
 }
}
复制代码

px2remLoader加到generateLoaders里面

5.到此完毕，重启项目

npm run dev
复制代码

6.可以愉快的搞事情了

.asd{
    width:200px;
    height:200px;
    background:#ff7900;
}
渲染出来是这样的
复制代码

转载于:https://juejin.im/post/5acf2d8af265da237f1eb02f