【vue项目适配可借助于插件lib-flexible 和postcss-px2rem】

前言：vue项目适配可借助于插件lib-flexible 和postcss-px2rem。

lib-flexible插件的作用：根据屏幕尺寸不同设置html根标签的字体大小，1rem即等于根标签的字体大小。

postcss-px2rem插件的作用：将px转为rem,如此以来我们可以在开发的过程中使用px单位。

注意：该插件不适用于行内样式，如使用行内样式，postcss-px2rem 则不能将px转为rem

具体使用方法如下：

一、下包（使用yarn或者npm都可）

1、yarn 命令下包

yarn add lib-flexible postcss-px2rem

2、npm命令下包

npm i lib-flexible postcss-px2rem

二、更改插件配置

1、更改lib-flexible插件的配置

找到node_modules文件夹下的lib-flexible下的flexible.js文件，修改refreshRem 函数

 function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540* dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}

改为

 function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = width * dpr;//-------------------}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}

2、配置postcss-px2rem

在vue.config.js文件中追加如下代码

const px2rem = require('postcss-px2rem')
const postcss = px2rem({remUnit: 192, // 设计稿十等分后的值1rem=192pxremPrecision: 6 // 转化后小数点位数
})module.exports = {css: {// PC分辨率端适配loaderOptions: {css: {},postcss: {plugins: {postcss}}}}
}

注意：修改vue.config.js代码需要重启项目

三、重启项目测试

f12控制台检查html标签，当html标签设置了font-size即说明lib-flexible插件生效

检查样式px是否转为rem,如转为rem即生效

ps:在适配过程中，刚开始我的单位px未转化为rem,最后将vue/cli版本从5.0.8降低为4.5.15才生效。

如使用 px2rem-loader 插件适配,采用如下方式配置，则注意px2rem-loader插件配置方式对scss代码并不生效，需为css，不能使用scss

 chainWebpack: config => {config.module.rule('css').test(/\.css$/).oneOf('vue').resourceQuery(/\?vue/).use('px2rem').loader('px2rem-loader').options({remUnit: 192, // 根据视觉稿，rem为px的十分之一，1920px  192 remremPrecision: 8// 换算的rem保留几位小数点})}