vue PC端适配: 使用px2rem-loader和lib-flexible

本文章是介绍pc端基于px2rem-loader和lib-flexible实现的px转rem的适配方案
我的本地环境是vue2.0

1.安装

npm install px2rem-loader -D
npm install lib-flexible -S

2.配置

在build文件夹下的utils.js文件下进行配置;具体配置如下

'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production' ?
    config.build.assetsSubDirectory :
    config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
  options = options || {}

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

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  **const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 192,
      remPrecision: 6
    }
  }**

  // generate loader string to be used with extract text plugin
  function generateLoaders(loader, loaderOptions) {
    **const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]**
    //此处略去无关代码
}

主要是增加px2remLoader,并在generateLoaders()方法里添加px2remLoader

3.main.js文件引入

通过import 'lib-flexible/flexible'的方式引入

4.修改flexible.js文件

在node_module下找到lib-flexible文件中的flexible.js

 function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = width * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  }

将其中的refreshRem改为这个样子就可以了