vue-cli 4.X当中使用lib-flexible

第一部分：项目中引入lib-flexible

一、项目中安装lib-flexible

$  npm install lib-flexible

二、查看是否安装完成

打开packge.json文件，找到dependencies对象，如下：

 "dependencies": {
     "lib-flexible": "^0.3.2",//这就是安装成功了
   },

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

import 'lib-flexible'

四、 安装postcss-px2rem

$  npm install postcss-px2rem

五、查看是否安装完成

打开packge.json文件，找到dependencies对象，如下：

"dependencies": {
"lib-flexible": "^0.3.2",

"postcss-px2rem": "^0.3.0",

},

六、配置postcss-px2rem

打开vue.config.js文件，找到css对象，如下：

css: {
		// 是否使用css分离插件 ExtractTextPlugin
		// extract: true,
		// 开启 CSS source maps?
		sourceMap: false,
		// css预设器配置项
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({ //配置项，详见官方文档
                        remUnit: 192 // 换算的基数
                    })
                ]
            }
        },
		// 启用 CSS modules for all css / pre-processor files.
		modules: false
	},

七、修改lib-flexible的固定参数

打开flexible.js文件，修改如下内容：

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;
    }

 最后一步，便是运行程序，便能发挥效果。