vue-cli 配置 flexible

在移动端开发过程中，常常遇到这样一个尴尬的问题，设计稿的标尺大小总是大于实际开发中的大小，让前端工程师每次都要自己计算。所以查找百度找到了flexible。下面是对flexible的配置。

基于vue-cli配置移动端自适应

1、安装 flexible和 px2rem-loader

在命令行输入

npm install lib-flexible --save
npm install px2rem-loader --save

2、引入lib-flexible

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

import 'lib-flexible'

3、添加 meta 标签

在项目根目录的 index.html 中添加如下 meta

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

4、配置px2rem-loade

在bulid文件下的utils.js文件下

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  var px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75  //1rem=多少像素 这里的设计稿是750px。
    }
  }
 function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, px2remLoader] : [cssLoader]
   ...
  }

配置完成后就可以根据你设计稿的标尺来直接用到你的代码中了