移动端的适配

1.安装lib-flexible.js； //基于vue-cli配置手淘的lib-flexible + rem，实现移动端自适应
npm install lib-flexible
2.在min.js导入 lib-flexible
import ‘lib-flexible/flexible.js’
注意html文件的heade中，如果meta name=viewport标签存在，需要去掉
3.安装px2rem-loader；//使用 webpack 的 px2rem-loader,自动将px转换为rem
npm install px2rem-loader
配置
首先找到 build/utils.js文件，在utils.js中添加如下配置
4、如果我们如果引入了第三方框架，他们的样式是另一套写法，样式会被flexible转换，就会破坏框架的样式,例如：mint-ui picker整体会变小

原因是我们之前配置的px2rem也会把我们引入的ui组件也转换成rem的格式，本身组件已经是为移动端做了适配，px2rem又转成了rem就导致其样式变的很小，解决办法:就是我们还是使用flexible.js，然后不使用px2rem，也就是不要上面的配置

px2remLoader暂时不用

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

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + ‘-loader’,
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
注意：1.只能将.vue文件的px转成rem，不能将script标签和元素style里面定义的px转成rem
2.如果在.vue文件style中的某一行代码不希望转成rem，只要在后面写上注释/no/

 https://zhuanlan.zhihu.com/p/76833513