1.在Index.html里面加入loading的元素，让loading元素显示，让app元素隐藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon"> <style media="screen" type="text/css"> #appLoading { width: 100%; height: 100%; } #appLoading span { position: absolute; display: block; font-size: 50px; line-height: 50px; top: 50%; left: 50%; width: 200px; height: 100px; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } </style> </head> <body> <div id="appLoading"> <span>Loading...</span> </div> <div id="app" style="display: none"> <app></app> </div> <!-- built files will be auto injected --> </body> </html>
2.在App.vue中加入： 加载完成之后，让loading隐藏，让app元素显示
mounted(){ document.getElementById('app').style.display = 'block'; document.getElementById('appLoading').style.display = 'none'; }
3. 原理
在文档开始加载的时候显示loading
在js加载完毕后，显示app