1.首先找到项目根路径下的public文件下的index.html
2.添加以下代码:
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>//网站名称
<style>
html,
body,
//添加样式
#app {
height: 100%;
margin: 0;
padding: 0;
}
#Loading {
top: 50%;
left: 50%;
position: absolute;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
z-index: 100;
}
@-webkit-keyframes ball-beat {
50% {
opacity: 0.2;
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes ball-beat {
50% {
opacity: 0.2;
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.ball-beat {
text-align: center;
}
.ball-beat > div {
background-color: #279fcf;
width: 15px;
height: 15px;
border-radius: 100% !important;
margin: 2px;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
display: inline-block;
-webkit-animation: ball-beat 0.7s 0s infinite linear;
animation: ball-beat 0.7s 0s infinite linear;
}
.ball-beat > div:nth-child(2n-1) {
-webkit-animation-delay: 0.35s !important;
animation-delay: 0.35s !important;
}
</style>
</head>
<body>
<noscript>
<strong>
We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app">
//添加首屏加载内容
<div id="Loading">
<div class="loader-inner ball-beat">
<div></div>
<div></div>
<div></div>
<p>初次加载资源可能需要较多时间 请耐心等待</p>
</div>
</div>
</div>
</body>
</html>
注意:一定要把加载内容放到id为app的div元素里面,实现原理主要是:加载完项目之前,不会将dom元素放在app这个div内,html渲染出,Vue的资源还在加载,只有加载完成后才会写入app下,从而顶替掉其中的loading页面内容。这样就实现了在还没加载出页面前显示loading加载中的样式,提升用户体验。