vue h5适配

vue h5适配(px自动转rem)

最近公司接手一个H5项目，重构后一直说我的页面有问题，后来发现前期公司搭建项目时没有做适配，后来通过查找资料，找到了一套如何将px自动转为rem适配的方案

1. 先安装插件lib-flexible

npm i lib-flexible -S

2. 在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3.安装px2rem-loader，可自动将px转为rem

npm install px2rem-loader -S

4. 配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
   }
}

在generateLoaders方法中将原有的替换成px2remLoader

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

5. 配置index.html文件

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no">

配置成功后不要忘记：npm run dev，方可生效

标注：
以上配置可直接使用，项目中亲测有效，不过有一个问题就是，页面中没设置字体大小的文字会默认继承插件生成的字体大小，因为是后期接手项目，所以我是将整个页面的字体设置一个值，有设置字体将会覆盖页面字体，没有设置值的将会继承