webpack: vue-cli 脚手架环境 rem 的配置

注意：本进阶是在 webpack进阶【17】的基础上进行衍生。
我们做移动端的时候，以往项目进行手机设备适配比较麻烦。现在我们用了 webpack 搭建的 vue-cli 脚手架环境，可以让我们轻松来进行各个手机设备的适配。

一、vue-cli 进行 rem 的配置

• 1、插件下载

// lib-flexible 插件导入 rem 的 js， 动态的设置了，不同的屏幕的 html 根元素 font-size
// postcss-px2rem 插件 把 px 转换成 rem；
cnpm i lib-flexible postcss-px2rem -D

• 2、main.js 中引用

// 导入 rem 的 js, 动态的设置了，不同屏幕的 html 根元素的 font-size
import 'lib-flexible'

完整main.js 如截图

image.png

• 3. 在 public 中的 index.html 中 删除 meta 标签
     flexible 会为页面根据 屏幕自动添加 <meta name='viewport'> 标签，动态控制
     【initial-scale，maximun-scale，mininum-scale 等属性的值】

     
     image.png
• 4、在 vue.config.js 中配置如下

module.exports = {
    devServer: {
        port: 3000,
        open: true,
    },
    // rem 的配置
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    require('postcss-px2rem') ({
                        // 适配 375 屏幕， 设计图 750 中量出来的尺寸要 除以 2
                        // 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库
                        remUnit: 37.5
                    })
                ]
            }
        }
    }
}

适配设置在

image.png

• 5、这样就能在页面上看到适配了

  
  image.png