vue-cli，用px写完项目之后，发现需要做自适应

用px写完项目之后才发现没做自适应，woc。还好用这几个插件，可以将px转化为rem，并引入自适应拉伸方案。

安装插件

npm i postcss-pxtorem -D

npm i lib-flexible -S

npm i px2rem-loader -D

• 安装完成之后。修改vue.config.js中的配置文件

module.exports = {
    chainWebpack: config => {
        config.module
            .rule("css")
            .test(/\.css$/)
            .oneOf("vue")
            .resourceQuery(/\?vue/)
            .use("px2rem")
            .loader("px2rem-loader")
            .options({
                remUnit: 192
            });
    }
}

• 根目录新建文件 postcss.config.js

const pxtorem = require("postcss-pxtorem");
module.exports = {
    plugins: [
        pxtorem({
            rootValue: 192,//我这里配置的是我1366分辨率下的基准值，会在下面解释
            unitPrecision: 5,
            propList: ["*"],
            selectorBlackList: [/^\.nop2r/, /^\.am/,'html'],
            //排除antd样式，由于我给html设置了min-width，所以把html也排除在外不做rem转换
            replace: true,
            mediaQuery: false,
            minPixelValue: 0
        })
    ]
}

• 修改文件 …/node_modules/lib-flexible/flexible.js

/* 540为修改后参数*/
    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;
    }

• 终于顺利完成了自适应，淦！
• 欢迎讨论。