vue中的rem如何配置

const setFontSize = (minFontSize = 12, maxFontSize = 16) => {
    // 7.5根据设计稿的横向分辨率/100得来
    var deviceWidth = document.documentElement.clientWidth;
    // 获取浏览器宽度
    if(deviceWidth > 750) {
        // deviceWidth = 750;
        deviceWidth = 7.5 * 50;
    } else if (!deviceWidth) {
         return;
    }
    const fontSize = Math.max(minFontSize, Math.min(12 * (deviceWidth / 320), maxFontSize));
    document.documentElement.style.fontSize = `${fontSize}px`;
    // 这样子的1rem=font-size的大小
    // 当然，万一你觉得这样子做的rem太小，可以推荐你第二种写法，相对更加简便，代码如下(注释的)
     // 获取浏览器宽度
    //if(deviceWidth > 750) {
        // deviceWidth = 750;
        //deviceWidth = 7.5 * 50;
    //}
    // document.documentElement.style.fontSize = `${deviceWidth / 7.5}px`;
    // 此时的fontSize大小为50px(375屏幕的时候)
    // 禁止双击放大
    document.documentElement.addEventListener('touchstart', function (event) {
        if (event.touches.length > 1) {
            event.preventDefault();
        }
    }, false);
    var lastTouchEnd = 0;
    document.documentElement.addEventListener('touchend', function (event) {
        var now = Date.now();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
}
export default {
    setFontSize ,
}

// 样式适应处理
import Rem from './utils/rem';
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
});
Rem.setFontSize();

//通用样式
body{
  font-family: "PingFangSC-Regular","PingFang SC","兰亭黑","Helvetica",sans-serif;
  color: @color-text;
  font-size: 14px;
  // font-sizt: 0.28rem; 375屏时
  background-color: @color-background;
}

// 自定义样式
require('./assets/css/global.less');
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
});
Rem.setFontSize();

npm install  px2rem-loader  lib-flexible --save 
                      or
yarn add px2rem-loader lib-flexible --save

import 'lib-flexible/flexible.js'

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

npm install lib-flexible --save-dev
npm install postcss-pxtorem --save-dev

import 'lib-flexible/flexible' // px自动转rem

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 75, // 设计稿宽度的1/10,
      "propList": ['*'],// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
    }
  }
}