vue移动端项目px转化rem

前端开发者都知道，pc端使用的是px 像素值，而移动端项目 需要使用到rem ，两者之间的通常是需要换算的，显得非常麻烦，后来通过查找适用插件非常方便！！！

vue项目移动端插件flexible

配合vue脚手架使用非常方便

首先：

首先你需要使用脚手搭建架一个项目，搭建步骤就不说了…
然后安装 lib-flexible

npm i lib-flexible --save

然后在main.js 引入使用

import 'lib-flexible/flexible'

在安装 px2rem-loader

npm install px2rem-loader

然后在项目build文件夹下找到until.js，将px2rem-loader添加exports.cssLoaders 中

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

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

//将代码放入 postcssLoader  方法下
   const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

然后更改文件 generateLoaders

function generateLoaders (loader, loaderOptions) {
//  const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]  //将源文件更改为下列方式
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
		
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
   

最后 npm run dev 运行项目就行了！！
使用方法如下：

		font-size:16px;
		border: 1px solid black; /*px*/

后边标注px的页面可以显示px值 而没有转化为rem
css 后不标注 px 的 页面显示转化为rem

上边只是根据查找得出的简单使用方式，请会的朋友 批评指正