vue项目内嵌到H5+app，并通过链接跳转，白屏优化问题解决

在5+app的index.html页通过链接访问自己的vue项目，从而实现打包时，只有一个链接，在更新代码时，只需要更新一次代码，即可实现在浏览器，安卓，ios同时实现更新。

在链接访问vue项目时，因为vue项目时单页面的项目，所以在首页加载时会将所有需要的东西一次性加载出来，对于一些网络差或者设备差的设备，在打开时白屏会持续数秒，为了解决这个问题，可以从项目优化和使用过渡动画解决。

项目优化可以减少白屏时间，但是无法在设备性能差的情况下做到0延迟。所以需要同时着手。

目前使用过渡动画解决方案，即在vue项目的index.html页面加上过渡动画代码。性能优化正在进行中，过渡动画代码如下：

<style>

html,

body,

#app {

height: 100%;

margin: 0px;

padding: 0px;

}

.chromeframe {

margin: 0.2em 0;

background: #ccc;

color: #4ea3fb;

padding: 0.2em 0;

}

#loader-wrapper {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 999999;

}

#loader {

display: block;

position: relative;

left: 55%;

top: 40%;

width: 100px;

height: 100px;

margin: -75px 0 0 -75px;

border-radius: 50%;

border: 3px solid transparent;

/* COLOR 1 */

border-top-color: #4ea3fb;

-webkit-animation: spin 2s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

-ms-animation: spin 2s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

-moz-animation: spin 2s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

-o-animation: spin 2s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

animation: spin 2s linear infinite;

/* Chrome, Firefox 16+, IE 10+, Opera */

z-index: 1001;

}

#loader:before {

content: "";

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

border-radius: 50%;

border: 3px solid transparent;

/* COLOR 2 */

border-top-color: #4ea3fb;

-webkit-animation: spin 3s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

-moz-animation: spin 3s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

-o-animation: spin 3s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

-ms-animation: spin 3s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

animation: spin 3s linear infinite;

/* Chrome, Firefox 16+, IE 10+, Opera */

}

#loader:after {

content: "";

position: absolute;

top: 15px;

left: 15px;

right: 15px;

bottom: 15px;

border-radius: 50%;

border: 3px solid transparent;

border-top-color: #4ea3fb;

/* COLOR 3 */

-moz-animation: spin 1.5s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

-o-animation: spin 1.5s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

-ms-animation: spin 1.5s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

-webkit-animation: spin 1.5s linear infinite;

/* Chrome, Opera 15+, Safari 5+ */

animation: spin 1.5s linear infinite;

/* Chrome, Firefox 16+, IE 10+, Opera */

}

@-webkit-keyframes spin {

0% {

-webkit-transform: rotate(0deg);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(0deg);

/* IE 9 */

transform: rotate(0deg);

/* Firefox 16+, IE 10+, Opera */

}

100% {

-webkit-transform: rotate(360deg);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(360deg);

/* IE 9 */

transform: rotate(360deg);

/* Firefox 16+, IE 10+, Opera */

}

@keyframes spin {

0% {

-webkit-transform: rotate(0deg);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(0deg);

/* IE 9 */

transform: rotate(0deg);

/* Firefox 16+, IE 10+, Opera */

}

100% {

-webkit-transform: rotate(360deg);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: rotate(360deg);

/* IE 9 */

transform: rotate(360deg);

/* Firefox 16+, IE 10+, Opera */

}

#loader-wrapper .loader-section {

position: fixed;

top: 0;

width: 51%;

height: 100%;

background: #fff;

/* Old browsers */

z-index: 1000;

-webkit-transform: translateX(0);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: translateX(0);

/* IE 9 */

transform: translateX(0);

/* Firefox 16+, IE 10+, Opera */

}

#loader-wrapper .loader-section.section-left {

left: 0;

}

#loader-wrapper .loader-section.section-right {

right: 0;

}

/* Loaded */

.loaded #loader-wrapper .loader-section.section-left {

-webkit-transform: translateX(-100%);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: translateX(-100%);

/* IE 9 */

transform: translateX(-100%);

/* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

}

.loaded #loader-wrapper .loader-section.section-right {

-webkit-transform: translateX(100%);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: translateX(100%);

/* IE 9 */

transform: translateX(100%);

/* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

}

.loaded #loader {

opacity: 0;

-webkit-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

}

.loaded #loader-wrapper {

visibility: hidden;

-webkit-transform: translateY(-100%);

/* Chrome, Opera 15+, Safari 3.1+ */

-ms-transform: translateY(-100%);

/* IE 9 */

transform: translateY(-100%);

/* Firefox 16+, IE 10+, Opera */

-webkit-transition: all 0.3s 1s ease-out;

transition: all 0.3s 1s ease-out;

}

/* JavaScript Turned Off */

.no-js #loader-wrapper {

display: none;

}

.no-js h1 {

color: #222222;

}

#loader-wrapper .load_title {

font-family: 'Open Sans';

color: #4ea3fb;

font-size: 24px;

width: 100%;

text-align: center;

z-index: 9999999999999;

position: absolute;

top: 60%;

opacity: 1;

line-height: 30px;

}

#loader-wrapper .load_title p {

height: 50px;

padding-top: 10px;

font-weight: normal;

font-style: italic;

font-size: 20px;

color: #4ea3fb;

opacity: 0.8;

}

</style>

</head>

<body><noscript><strong>We're sorry but vue_zlgl doesn't work properly without JavaScript enabled. Please enable it to

continue.</strong></noscript>

</div>

这个方法是借鉴的网络上一个大佬的，链接找不到。