vue-cli配置移动端自适应
1、问题:vue开发中测试时发现适配有问题,找了一下资料,发现使用 lib-flexible 和 px2rem-loader将px转为rem;
2、安装lib-flexible:npm install lib-flexible --save
在项目入口文件main.js引入lib-flexible
3、查看index.html中meta配置:<meta name="viewport" content="width=device-width, initial-scale=1.0">
4、安装px2rem-loader:npm install px2rem-loader --save
5、在build中utils中配置px2rem-loader:
(1)、定义一个变量 px2remLoader:remUnit:值对应的是设计图图宽度的十分之(根据设计图更改)
var px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 37.5 } }
(2)、在 generateLoaders 函数中更改 loaders
var loaders = [cssLoader,px2remLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) }
6、重启就可以看到 px 转换成 rem 了