vue项目使用lib-flexible解决移动端适配问题（方案一）

写在前面

我们知道，rem单位的尺寸是相对于根元素（html）的字体大小font-size的尺寸，用以解决移动端不同终端设备屏幕不一致配置问题。

一、安装依赖

安装 lib-flexible 和 px2rem-loader 到项目中，如果未安装 less 和 less-loader，一并安装到项目中。
安装命令：

yarn add lib-flexible px2rem-loader less less-loader --save

二、配置

1、在项目的入口文件main.js中引入lib-flexible

import 'lib-flexible';

其实，只要项目中引用了lib-flexible，就可以用lib-flexible来解决移动端适配了。

2、配置px2rem-loader
（1）、打开build/utils.js文件，找到exports.cssLoaders方法，在里面添加如下代码

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

如下图：

（2）、修改generateLoaders方法中的loaders

// 注释掉这一行
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
// 修改为
const loaders = [cssLoader, px2remLoader]
 
if (options.usePostCSS) {
  loaders.push(postcssLoader)
}

如下图：

三、测试

启动项目，在样式中直接写px，如

浏览器中审查元素发现px已经转为了rem，因为不同终端的根元素字体大小是lib-flexible动态计算的，这样就能实现移动端适配了

但是这个0.6rem是怎么来的呢？
计算公式：45 / 75 = 0.6

单遗憾的是：

1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem

2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no */ 就可以了