vue移动端自适应布局（基于vue-cli）

本篇文章引自 http://blog.csdn.net/z1712636234/article/details/77881685；

1.安装lib-flexibl

 npm i lib-flexible --save

2.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

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

4.安装px2rem-loader

npm install px2rem-loader

使用flexible插件时 会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ，将px转换成rem，我们将使用px2rem这个工具， 它有webpack的loader： https://github.com/Jinjiang/px2rem-loader （这是px2rem-loader的github地址）

5.配置px2rem-loader

在vue-cli生成的webpack 配置中，vue-loader 的options和其他样式文件loader 最终都是由build/untils.js里的一个方法生成的。

我们只需要在cssLoader后面加上一个px2remLoader即可，px2rem-loader的remUnit 选项意思是1rem=多少像素，结合lib-flexible，我们将px2remLoader的option.remUnit 设置成设计稿宽度的1/10，这里我们假设设计稿的宽度为750px ,并将px2remLoader 放进loaders数组中

 const px2remLoader = {
 loader: 'px2rem-loader',
 options: {
 remUnit: 75
 }
 }
// generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {

//我的项目上原来的是const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]，将他替换成下面的就可以了

 const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

6.重新启动项目即可