vue-cli3用rem進(jìn)行適配步驟

1. 安裝手淘的flexible,插件名稱叫amfe-flexible

   npm i amfe-flexible --save-dev
   

npm i postcss-pxtorem

2. 在main.js導(dǎo)入

   import 'amfe-flexible'
   

3. 在/vue.config.js添加px2rem插件,把項(xiàng)目中的px轉(zhuǎn)為rem

   const autoprefixer = require("autoprefixer");
   const pxtorem = require("postcss-pxtorem");
   const path = require("path");
   
   const themePath = path.resolve(__dirname, "src/assets/style/theme.less");
   
   module.exports = {
     // 關(guān)閉eslint檢查
     lintOnSave: false,
     // 配置css前綴,px轉(zhuǎn)rem
     css: {
       loaderOptions: {
   
         // vant換主題
         less: {
           modifyVars: {
             hack: `true; @import "${themePath}";`
           }
         },
           // 后處理器配置
         postcss: {
           plugins: [
             // 配置樣式前綴
             autoprefixer(),
             // 把px轉(zhuǎn)為rem
             pxtorem({
               rootValue: 37.5,
               propList: ["*"]
             })
           ]
         }
       }
     },
   
     configureWebpack: {
       externals: {
         axios: "axios" // 配置使用CDN
       }
     }
   };
   

http://huruqing.cn/docs/Vue/advance/06.rem.html