vue-cli项目处理vant自适应问题

原因

vant自带的样式，用的单位是px，无法自适应。一般有两种处理方式：

1. 写媒体查询(缺点：工作量太大)
2. px转化为rem

考虑到工期原因，我最终选择第二种方法。处理过程如下：

---

安装插件

• postcss-pxtorem: 用于将单位px转化为rem

// 安装命令
npm i -D postcss-pxtorem

• lib-flexible : 给html标签设置font-size， 作为rem基准值 （因为我的项目已经用脚本添加了，所以我是没有安装的）

---

配置

1. vue-loader.conf.js

   • 在根目录下的build文件夹下找到该文件
     

   • 开启usePostCSS功能

   module.exports = {
   	loaders: utils.cssLoaders({
   		sourceMap: sourceMapEnabled,
   		extract: isProduction,
   		usePostCSS: true, // 开启usePostCSS功能
   	}),
   	...
   }
   

2. .postcssrc.js
   • 在根目录下找到该文件
   • 配置postcss-pxtorem插件

   module.exports = {
   	"plugins": {
   		"postcss-pxtorem": {
   			rootValue({ file }) {
   				return 375 / 720;	// 这里的返回值跟html标签的font-size计算方式相关，所以要改成你们自己的
   			},
   			propList: ['*'],
   		},
   		...
   	}
   }
   

---

遇到的问题

1. [object Object] is not a PostCSS plugin
   • 原因是前面安装的postcss-pxtorem版本太高了，重新安装低版本即可

   // 卸载
   npm uninstall postcss-pxtorem
   // 安装
   npm i -D postcss-pxtorem@5.1.1
   

---

验证效果