通过vue-cli或webpack-cli搭建的vue项目使用amfe-flexible进行rem适配

前言：目前大多是通过vue-cli来搭建项目，但早前也有使用webpack-cli搭建项目，两者会在文件的目录上有些区别，整体的结构和原理是一样的。此处会分别进行介绍。
一、通过vue-cli搭建项目
1.安装依赖

npm install amfe-flexible –save
npm install postcss-pxtorem@5.1.1 –save
(尝试过下载最新版本的postcss-pxtorem报错)

2.在main.js或index.js中引入

import 'amfe-flexible';

3.在vue.config.js文件添加配置，若没有该文件则在根目录下创建该文件

postcss: {
   plugins: [
      require('postcss-pxtorem')({
      //换算的基数：默认设计稿375px，因此默认为37.5，一般不建议修改它，使用vant ui框架中也是默认37.5
      rootValue: 37.5,
      /*忽略转换正则匹配项，插件会转化所有的样式的px。如引入了三方UI也会被转化.
      在此添加项目中不需要自动转换成PX的样式，如: .vant表示.vant开头的都不会转换*/
      selectorBlackList: ['.vant'],
      propList: ['*'] //属性的选择器，*表示通用
   	})
  ]
}

如图：

4.在index.html文件头部标签中添加meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

效果验证：
重启项目，在浏览器中检查项目元素，html标签中会根据不同屏幕分辨率生成不同的根元素字体大小font-size，之前在项目中设置的像素值px会自动转换为对应的rem。
二、通过webpack-cli搭建项目
1.依赖amfe-flexible和postcss-pxtorem安装、index.js引入、添加meta标签如上
2.安装3.0.0版本的postcss-loader依赖（版本太高报错）

3.在根目录下创建.postcssrc.js文件，内容如下

4.在build/base.js文件中添加"postcss-loader"