vue 移动端的适配之-flexible

• flexible 安装

npm i lib-flexible --save

• 配置 flexiblegen

1.在 vue 入口文件中添加 import 'lib-flexible'
2.在项目根目tml录 index.html 中加入 <meta name="viewport" content="width=device-width, initial-scale=1.0">

• 将 px 自动转换成rem(px2rem-loader)

1.安装 npm i px2rem-loader --save-dev
2.为 build 目录下 utils.js 增加配置项 在 css-loader 下面增加

const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

3. 修改 utils.js 中 generateLoaders 函数 在loader 中 添加 px2remLoader

const loaders = options.usePostCSS ? [cssLoader,px2remLoader, postcssLoader] : [cssLoader,px2remLoader]

4. 重启 vue-cli