Vue2.0中关于px转换rem

利用vue-cli创建项目，保证index.html中

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

首先要转换要依赖于 px2rem-loader和lib-flexible模块

npm i px2rem-loader lib-flexible -D

然后去main.js中引入

import 'lib-flexible/flexible'

再去脚手架搭建的build目录下找到utils.js中配置

 const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75     //这个75是设计图的十分之一，如设图是750，即是75，设计图640，即,64
    }
  };


 function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]//此处添加px2remLoader即可

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

最后npm run dev运行即可

注：引入的外部css是无法转换单位的，如import引入的，只能转组件中style中的px,如果不想让某些px单位转换，px写成大写PX  那么此PX不会转成rem