加入首屏加载动画

6 years ago · 70a6873ea9
parent 72686eeb79
commit 70a6873ea9
3 changed files with 33 additions and 7 deletions
--- a/vue/public/index.html
+++ b/vue/public/index.html
@ -10,9 +10,30 @@
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link href="<%= BASE_URL %>favicon.ico" rel="icon">
    <title><%= webpackConfig.name %></title>
+    <style>
+        #loader-wrapper {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 999;
+            color: white;
+            background-color: #283443;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+    </style>
 </head>
 <body>
-<div id="app"></div>
+<div id="app">
+    <div id="loader-wrapper">
+        <img src="data:image/svg+xml;base64,PCEtLSBCeSBTYW0gSGVyYmVydCAoQHNoZXJiKSwgZm9yIGV2ZXJ5b25lLiBNb3JlIEAgaHR0cDovL2dvby5nbC83QUp6YkwgLS0+Cjxzdmcgd2lkdGg9IjU1IiBoZWlnaHQ9IjgwIiB2aWV3Qm94PSIwIDAgNTUgODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0iI0ZGRiI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDgwKSI+CiAgICAgICAgPHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjIwIiByeD0iMyI+CiAgICAgICAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9ImhlaWdodCIKICAgICAgICAgICAgICAgICBiZWdpbj0iMHMiIGR1cj0iNC4zcyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjIwOzQ1OzU3OzgwOzY0OzMyOzY2OzQ1OzY0OzIzOzY2OzEzOzY0OzU2OzM0OzM0OzI7MjM7NzY7Nzk7MjAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9yZWN0PgogICAgICAgIDxyZWN0IHg9IjE1IiB3aWR0aD0iMTAiIGhlaWdodD0iODAiIHJ4PSIzIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIycyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjgwOzU1OzMzOzU7NzU7MjM7NzM7MzM7MTI7MTQ7NjA7ODAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9yZWN0PgogICAgICAgIDxyZWN0IHg9IjMwIiB3aWR0aD0iMTAiIGhlaWdodD0iNTAiIHJ4PSIzIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIxLjRzIgogICAgICAgICAgICAgICAgIHZhbHVlcz0iNTA7MzQ7Nzg7MjM7NTY7MjM7MzQ7NzY7ODA7NTQ7MjE7NTAiIGNhbGNNb2RlPSJsaW5lYXIiCiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIC8+CiAgICAgICAgPC9yZWN0PgogICAgICAgIDxyZWN0IHg9IjQ1IiB3aWR0aD0iMTAiIGhlaWdodD0iMzAiIHJ4PSIzIj4KICAgICAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iaGVpZ2h0IgogICAgICAgICAgICAgICAgIGJlZ2luPSIwcyIgZHVyPSIycyIKICAgICAgICAgICAgICAgICB2YWx1ZXM9IjMwOzQ1OzEzOzgwOzU2OzcyOzQ1Ozc2OzM0OzIzOzY3OzMwIiBjYWxjTW9kZT0ibGluZWFyIgogICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiAvPgogICAgICAgIDwvcmVjdD4KICAgIDwvZz4KPC9zdmc+">
+        <p>资源加载中......</p>
+    </div>
+</div>
 </body>

 <!--echarts-->
--- a/vue/src/router/constant/index.js
+++ b/vue/src/router/constant/index.js
@ -3,6 +3,7 @@
 * constant/modules下的所有route都会加上noAuth:true
 */
 import Layout from '@/layout'
+import {lazyLoadView} from '@/router/util'

 const modulesFiles = require.context('./modules', false, /\.js$/)
 const modules = modulesFiles.keys().reduce((modules, modulePath) => {
@ -21,7 +22,7 @@ const routes = [
        children: [
            {
                path: 'index',
-                component: () => import('@/views/index'),
+                component: () => lazyLoadView(import('@/views/index')),
                name: 'index',
                meta: {title: '首页', affix: true, icon: 'home'}
            }
@ -35,7 +36,7 @@ const routes = [
            {
                path: 'index',
                name: 'userCenter',
-                component: () => import('@/views/userCenter'),
+                component: () => lazyLoadView(import('@/views/userCenter')),
                meta: {title: '个人中心', noCache: true, icon: 'user'},
            }
        ],
--- a/vue/src/router/constant/modules/app.js
+++ b/vue/src/router/constant/modules/app.js
@ -1,5 +1,9 @@
 /*路由表：系统页面*/
 import Layout from '@/layout'
+import Redirect from '@/views/app/redirect'
+import Login from '@/views/app/login'
+import Page404 from '@/views/app/404'
+import Page403 from '@/views/app/403'

 const router = [
    {
@ -8,22 +12,22 @@ const router = [
        children: [
            {
                path: '/redirect/:path(.*)',
-                component: () => import('@/views/app/redirect')
+                component: Redirect
            }
        ]
    },
    {
        path: '/login',
        alias: '/register',
-        component: () => import('@/views/app/login')
+        component: Login
    },
    {
        path: '/404',
-        component: () => import('@/views/app/404')
+        component: Page404
    },
    {
        path: '/403',
-        component: () => import('@/views/app/403')
+        component: Page403
    }
 ]