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。