vue cli3 集成 postcss.config.js

vue  cli3  自動px轉rem，能夠devDependencies安裝兩個插件來簡單實現：

"amfe-flexible": "^2.2.1",

"postcss-adaptive-exclude": "^0.5.1",

而後項目根目錄新增配置文件postcss.config.js或者.postcssrc.js

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-adaptive-exclude": {
            remUnit: 37.5,//自定義
            autoRem: true,
            exclude: /node_modules|public/i,//自定義
        },
    },
};

　　

而後src/main.js裏面導入

import 'amfe-flexible/index' 或者 import 'amfe-flexible'

總結：這只是一種方法，通常來說移動端頁面開發，設計稿寬度是375或者750，remUnit設置爲設計稿寬度的1/10，開發人員只需按照設計稿標註的px寫css，插件會自動根據設備的寬度定義font-size並轉成rem。