vue-cli脚手架配置px2rem适配方案

还在手动写rem换算么？还在使用build中的utils修改配置嘛？更新啦

安装

npm i lib-flexible -S
npm install px2rem-loader -S

引入

进入main.js

import 'lib-flexible/flexible'

index.html中要有下面视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在vue.config.js中新增配置

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 75
          })
  }
}

其他说明

这里的remUnit就是你设计稿除以10得到的结果，然后在你编写的页面设计稿多少px你就直接写多少px； 如果是在蓝湖的直接CV大法。。。