vue-cli rem自适应 px to rem

1、下载lib-flexible

使用的书vue-cli+webpack ,所以用npm 安装

npm i lib-flexible --save

2、引入lib-flexible

在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3、设置meta标签

通过设置meta 标签，设置设备宽度以及缩放比例

4、安装px2rem-loader

npm install px2rem-loader

5、配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中：

const cssLoader = {

    loader: 'css-loader',

    options: {

      minimize: process.env.NODE_ENV === 'production',

      sourceMap: options.sourceMap

    }

  }

  const px2remLoader = {

    loader: 'px2rem-loader',

    options: {

      remUnit: 75

    }

同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {

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

    if (loader) {

      loaders.push({

        loader: loader + '-loader',

        options: Object.assign({}, loaderOptions, {

          sourceMap: options.sourceMap

        })

      })

    }

6、最后，一定重启 ！！！  ok