vue项目中将px转化为rem来实现移动端的适配

1.需要安装两个插件
1-1：npm i lib-flexible --save
1-2：npm install px2rem-loader
2.安装后在index.html中加上

 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

3.在main.js中引入文件

import 'lib-flexible/flexible'

4.配置 px2rem-loade，在build下的 utils.js中加上
//我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。

const cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}
const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75
  }
}

5.同时，在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
 }

6.修改配置后需要重启，然后我们在组件中写单位直接写 px，设计稿量多少就可以写多少了。