webpack手动构建vue和vue-cli构建使用 px2rem-loader ,全局自动转换px单位,让自适应来的更简单点!

作移动端时，适配 是必须的。使用rem单位，可在不一样屏幕上完美显示相同的布局。px2rem 插件方便的将px单位转为了rem。

1. 本身手动构建vue webpck配置

咱们在开发过程当中，咱们在css文件中，直接按设计稿，直接以px像素为单位，而后在真正的应用中，咱们想让px自动转制为rem单位，那这个要怎么让构建工具自动转换呢？

你们想一下，咱们的构建工具，其实最主要仍是来自vue，vue这个文件中咱们使用了vue-loader,那若是说你使用了vue-cli脚手架的话，那么你想增长这个功能，并不简单，可是咱们手工打造构建工具，就不受限制，想怎么用就怎么用，按照刚才的思路，咱们知道，全部的文件几乎是vue文件，全部的loader是vue-loader。

在webpack配置，咱们一个文件可使用多个loader, 咱们使用vue-loader也能够用其它loader，那怎么用呢？这就要去看vue官方文档了。

这边我为你们找到这个文档

经过官方文档，咱们能够了解到，要使用sass-loader,要须要在vue-loader中，增长一个options进行相应的配置就可使用对应的loader了。

咱们如今要作的是能自动将px转换成rem,因此跟这也有类似类，只要咱们将转换的loader添加进行就能够了，那能将px自动转换成rem是哪一个loader呢？

那咱们要怎么找呢？当咱们不会的时候，能够到npm.js官网，而后能够猜测一到输入px, rem,一回车就能够看到

从图中咱们能够看到有个px2rem2-loader，下面还有一个px2rem，咱们直接搜索px2rem

这种loader有多个，日常咱们用的比较多的仍是px2rem，因此这边 就介绍px2rem，其它loader能够自行研究噢！点击进去咱们能够发现

里面有介绍咱们怎么安装，以及怎么引入，咱们能够模仿vue官网的写法

如上图,咱们主要注意几点

1. loader解析顺序是按从右到左的方法解析的。
2. px2rem官网是没有带后缀.loader,webpack2.0以后是没容许的，因此这边咱们要加上后缀。
3. scss文件首先要把scss转成正常的css，在交给px2rem.loader来作，因此是外还须要加上一个sass-loader
4. remUnit: 750//设计稿宽度/10,remPrecision:表示转换过程小数保留几位。

2. 使用vue-cli构建px2rem.loader

1）.下载lib-flexible

我使用的是vue-cli+webpack，因此是经过npm来安装的

npm i lib-flexible --save

2）引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3) 安装px2rem-loader

npm install px2rem-loader

4).配置px2rem-loader

在build下的 utils.js中，找到generateLoaders 方法，在这里添加 。

安装配置结束后，重启项目 。而后再浏览器中查看。会发现本身设置的px被转为rem 了。

愿你成为终身学习者