Vue移动端适配（lib-flexible的使用）

起步，lib-flexible安装

1.安装lib-flexible
项目根路径
npm install lib-flexible -s
2.使用lib-flexible
main.js文件中引入
import ‘lib-flexible’

浏览器按F12有如下效果即可。

金牌辅助px2rem-loader

lib-flexible 一般不会独立使用，而是搭配 px2rem-loader 一起使用，因为px2rem-loader自动将CSS中的px转换成rem.
1.安装 px2rem-loader
npm install px2rem-loader -s
2.配置px2rem-loader
（1） build/utils.js文件中，最上边新建常量

	const px2remLoader = {	
		 loader: 'px2rem-loader',
		 options: {
		 remUint: 75 // 以设计稿 750 为例， 750 / 10 = 75
			}
		}

（2）build/utils.js文件中，找到generateLoaders 中的 loaders 配置
// 注释掉这一行 //

 const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

// 修改为 //

const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
 loaders.push(postcssLoader)
}

重启项目 npm run dev

本文为学习过程中记录内容，希望对您有帮助！