vue移动端适配（配置postcss-px2rem）

现在配置postcss-px2rem移动端适配的方法大致有几种：

不管用那种方法配置，首先拉取依赖npm lib-flexible postcss-px2rem，或者npm lib-flexible postcss-pxtorem，两种配置的依赖是不一样的，要注意。这里没加–save是因为npm拉包默认就给你加到package.json的依赖里去了

然后以下配置方法任选一种使用

1.在postcss.config.js中配置（postcss-pxtorem）

module.exports = {
    plugins: {
        'autoprefixer': {
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        },
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
};

2.在vue.config.js中配置（postcss-px2rem）

module.exports={
	css: {
	        loaderOptions: {
	            css: {},
	            postcss: {
	                plugins: [
	                    require('postcss-px2rem')({
	                    	 // 适配 375 屏幕, 设计图750中量出来的尺寸要 / 2
           					 // 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
	                        remUnit: 37.5
	                    })
	                ]
	            }
	        }
	    },
}

3.其它

配置完成后注意删除掉index.html里的视窗meta标签 <meta name='viewport'> 以便让插件帮你生成。

最后在main.js里引入lib-flexible import 'lib-flexible'npm run serve看看吧，原来用px写的css，插件已经帮我们转成rem了，不过注意两种配置的依赖postcss-pxtorem和postcss-px2rem有差别哦。

如果在适配时需要排除一些UI组件库的话可以这么做：
先拉取postcss-px2rem-exclude依赖包
无需上面的配置了，直接在postcss.config.js里作这一个配置即可

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
            "remUnit": 75,
            "exclude": /node_modules/i
        }
    }
}

这个配置设置屏幕宽度为10rem*75px=750px，原来的box的width='375px’被转换为5rem，并排除了/node_modules下的内容，使UI组件大小不变。