perf: 1. 异常页面适配手机端。2. 恢复 403、404 路由

src/App.vue

@@ -25,4 +25,8 @@ export default {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+#app {
+  height: 100%;
+}
+</style>

src/router.js

@@ -120,21 +120,21 @@ const router = new Router({
           children: [
             {
               path: "/exception/403",
-              name: "403",
+              name: "exception403",
               component: () =>
                 import(/* webpackChunkName: "exception" */ "@/views/Exception/403"),
               meta: { title: "403" }
             },
             {
               path: "/exception/404",
-              name: "404",
+              name: "exception404",
               component: () =>
                 import(/* webpackChunkName: "exception" */ "@/views/Exception/404"),
               meta: { title: "404" }
             },
             {
               path: "/exception/500",
-              name: "500",
+              name: "exception500",
               component: () =>
                 import(/* webpackChunkName: "exception" */ "@/views/Exception/500"),
               meta: { title: "500" }
@@ -142,6 +142,20 @@ const router = new Router({
           ]
         }
       ]
+    },
+    {
+      path: "/403",
+      name: "403",
+      hideInMenu: true,
+      component: () =>
+        import(/* webpackChunkName: "exception" */ "@/views/Exception/403")
+    },
+    {
+      path: "*",
+      name: "404",
+      hideInMenu: true,
+      component: () =>
+        import(/* webpackChunkName: "exception" */ "@/views/Exception/404")
     }
   ]
 });

src/views/Exception/Exception.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="exception">
-    <img :src="model.src" class="exception-img" />
+    <div class="exception-img-block">
+      <div
+        class="img"
+        :style="{
+          'background-image': `url(${model.src})`
+        }"
+      ></div>
+    </div>
 
     <div class="exception-content">
       <h1>{{ model.title }}</h1>
@@ -29,19 +36,30 @@ export default {
 </script>
 <style lang="less" scoped>
 .exception {
-  height: 80%;
   display: flex;
   align-items: center;
+  height: 80%;
+  min-height: 500px;
+
+  &-img-block {
+    flex: 0 0 62.5%;
+    width: 62.5%;
+    padding-right: 100px;
 
-  &-img {
-    width: 100%;
-    max-width: 430px;
-    height: 360px;
-    margin: 0 130px 0 60px;
+    .img {
+      float: right;
+      width: 100%;
+      max-width: 430px;
+      height: 360px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: contain;
+    }
   }
 
   &-content {
     h1 {
+      line-height: 72px;
       margin-bottom: 24px;
       font-size: 72px;
       color: #434e59;
@@ -55,4 +73,25 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 576px) {
+  .exception {
+    display: block;
+    text-align: center;
+
+    &-img-block {
+      overflow: hidden;
+      margin: 0 auto 24px;
+      padding-right: 0;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .exception {
+    &-img-block {
+      margin-bottom: -24px;
+    }
+  }
+}
 </style>