vue项目中如何配置rem

1、在项目根目录下中找到public文件夹，在public文件新建一个viewport.js,在viewport.js中写

(function (doc, win) {
  var dpr = window.devicePixelRatio || 1
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth
      if (!clientWidth) return
      // 当前页面宽度相对于1920宽的缩放比例，可根据自己需要修改。
      // 屏幕1920x1080分辨率下40px=1rem
      docEl.style.fontSize = 40 * (clientWidth / 1920) + 'px'
      // 设置data-dpr属性，留作的css hack之用
      docEl.setAttribute('data-dpr', dpr)
      var delObj = document.getElementById('loading')
      if(delObj){
        $('#loading').remove()
      }
    }
  recalc()
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)

2、在项目根目录下找到main.js,在main.js中引入viewport.js

import '/public/viewport.js'