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組件大小不變。