移动端适配（APP屏幕自适应）

在目录下新建一个js文件

在文件中写入

;(function(win,lib){
    var doc=win.document;
    var docEl=doc.documentElement;
    var metaEl=doc.querySelector('meta[name="viewport"]');
    var flexibleEl=doc.querySelector('meta[name="flexible"');
    var dpr=0;
    var scale=0;
    var tid;
    var flexible = lib.flexible || (lib.flexible = {});
    if(metaEl){
        console.warn("将根据已有的meta标签来设置缩放比例");
        var match=metaEl.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
        if(match){
            scale=parseFloat(match[1]);
            dpr=parseFloat(1/scale)
        }
    }else{
        if(flexibleEl){
            var content=flexibleEl.getAttribute("content");
            if(content){
                var initialDpr=content.match(/initial\-dpr=([\d\.]+)/);
                var maximumDpr=content.match(/maximum\-dpr=([\d\.]+)/);
                if(initialDpr){
                    dpr=parseFloat(initialDpr[1]);
                    scale=parseFloat((1/dpr).toFixed(2))
                }
                if(maximumDpr){
                    dpr=parseFloat(maximumDpr[1]);
                    scale=parseFloat((1/dpr.toFixed(2)))
                }
            }
        }
    }
    if(!dpr&&!scale){
        var isAndroid=win.navigator.appVersion.match(/android/gi);
        var isIPhone=win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio=win.devicePixelRatio;
        if(isIPhone){
            if(devicePixelRatio>=3&&(!dpr||dpr>=3)){
                dpr=3;
            }else{
                if(devicePixelRatio>=2&&(!dpr||dpr>=2)) {
                    dpr = 2;
                }else{
                    dpr=1;
                }
            }
        }else{
            dpr=1;
        }
        scale=1/dpr
    }
    docEl.setAttribute("data-dpr",dpr);
    if(!metaEl){
        metaEl=doc.createElement("meta");
        metaEl.setAttribute("name","viewport");
        if(!!win.webPageScalable){
            metaEl.setAttribute("content","initial-scale="+scale+",user-scalable=yes")
        }else{
            metaEl.setAttribute("content","initial-scale="+scale+",maximum-scale="+scale+",minimum-scale="+scale+",user-scalable=no viewport-fit=cover")
        }
        if(docEl.firstElementChild){
            docEl.firstElementChild.appendChild(metaEl)
        }else{
            var wrap=doc.createElement("div");
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML)
        }
    }
    function refreshRem() {
        var width=docEl.getBoundingClientRect().width;
        var ua=navigator.userAgent.toLowerCase();
        if(!/ipad.*yanxuan/.test(ua)){
            if(width/dpr>750){
                width=750*dpr
            }
        }
        var rem=width/10;
        docEl.style.fontSize=rem+"px";
        flexible.rem=win.rem=rem
    }
    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=12*dpr+"px"
        }else{
            doc.addEventListener("DOMContentLoaded",
                function (e) {
                    doc.body.style.fontSize=12*dpr+"px"
                },
                false)
        }
        refreshRem();
        flexible.dpr=win.dpr=dpr;
        flexible.refreshRem=refreshRem();
        flexible.rem2px=function (d) {
            var val=parseFloat(d)*this.rem;
            if(typeof d==="string"&&d.match(/rem$/)){
                val+="px"
            }
            return val
        };
        flexible.px2rem=function (d) {
            var val=parseFloat(d)/this.rem;
            if(typeof d==="string"&&d.match(/px$/)){
                val += "rem"
            }
            return val
        }
})(window,window["lib"]||(window["lib"]={}));

然后在index.html中添加代码

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

在index.html中把之前写的rem.js文件导入到其中去

并在index.html文件中添加代码

<script type="text/javascript">
    var w_win=document.documentElement.clientWidth||document.body.clientWidth;
    var _html=document.getElementsByTagName('html')[0];
    _html.style.fontSize=w_win/20+'px';
  </script>

这就算完成了，运行项目。

这样的效果不是很明显，我们把Helloworld.vue的样式改小点

再运行看看

这样子就算成功了

或者我们可以在手机上面运行一下
打开电脑的热点，让手机连接上，然后把刚才的项目的页面生成二维码，手机扫码就可以看到我们的页面了。（也有其他的方法，如果这里的方法不适用，可以去网上查看其他的，此处仅介绍这个）