原创

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大法。。。

正文到此结束
阿里云主机低至1折