VUE中使用lib-flexible

VUE中使用rem lib-flexible

1. 安装lib-flexible

npm i lib-flexible --save

2. 在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

3. 在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签

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

4. 安装px2rem-loader

在实际的开发中，使用flexible插件时 会自动把px转换成rem单位。在vue-cli中安装过lib-flexible之后 ，将px转换成rem，我们将使用px2rem这个工具，

npm install px2rem-loader

5. 配置px2rem-loader

修改build/utils.js, 在cssLoader变量中

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      impo