find the index.html file
insert

<script>
//author:caibaojian
    //website:http://caibaojian.com
    //weibo:http:weibo.com/kujian
    //UCBUG
    //:designWidth
    //:maxWidth
    //js750750(750,750)
    ;(function(designWidth, maxWidth) {
      var doc = document,
        win = window,
        docEl = doc.documentElement,
        remStyle = document.createElement("style"),
        tid;

      function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        maxWidth = maxWidth || 540;
        width>maxWidth && (width=maxWidth);
        var rem = width * 100 / designWidth;
        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
      }

      if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(remStyle);
      } else {
        var wrap = doc.createElement("div");
        wrap.appendChild(remStyle);
        doc.write(wrap.innerHTML);
        wrap = null;
      }
      // wiewport  refreshRem refreshRem 2;
      refreshRem();

      win.addEventListener("resize", function() {
        clearTimeout(tid); //
        tid = setTimeout(refreshRem, 300);
      }, false);

      win.addEventListener("pageshow", function(e) {
        if (e.persisted) { // 
          clearTimeout(tid);
          tid = setTimeout(refreshRem, 300);
        }
      }, false);

      if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
      } else {
        doc.addEventListener("DOMContentLoaded", function(e) {
          doc.body.style.fontSize = "16px";
        }, false);
      }
    })(750, 750);
</script>

1rem = 100px

look at

this doesn't have much to do with vue .
1. If you are not using a third-party UI component library, you can directly introduce the js that you want to dynamically adjust font-size on the page. For example, Ali's flexble.js
2. If you use a third-party UI component library, such as vux , mint , you can search issue on the official github section for rem and there will be a corresponding solution.

an integrated scaffolding, https://github.com/cloud-temp. is recommended. It integrates
1, Ali's flexble.js , dynamically calculates the font-size
2 of the root node according to the dpr of the device, and introduces postcss-pxtorem , which solves the problem of px automatic conversion rem

  <script>
    function setRootFontSize() {
      /**/
      let width = document.documentElement.clientWidth || document.body.clientWidth
      /*414px414px13px*/
      if (width < 414) {
        document.documentElement.style.fontSize = width / 375 * 13 + 'px'
      }else {
        document.documentElement.style.fontSize = '13px'
      }
    }
    setRootFontSize()
    window.addEventListener('resize', function () {
      setRootFontSize()
    }, false)
</script>

/*pxrem*/
@function px2rem($px) {
  @return $px / 13 + rem;
}