chore: 解决冲突

package.json

@@ -61,6 +61,7 @@
     "unocss": "^0.45.26",
     "vite": "^3.1.4",
     "vite-plugin-svg-icons": "^2.0.1",
+    "vite-svg-loader": "^3.6.0",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^0.40.13"
   },

pnpm-lock.yaml

@@ -35,7 +35,8 @@ specifiers:
   unocss: ^0.45.26
   vite: ^3.1.4
   vite-plugin-svg-icons: ^2.0.1
-  vue: ^3.2.40
+  vite-svg-loader: ^3.6.0
+  vue: ^3.2.39
   vue-eslint-parser: ^9.1.0
   vue-router: ^4.1.5
   vue-tsc: ^0.40.13
@@ -79,6 +80,7 @@ devDependencies:
   unocss: 0.45.26_vite@3.1.4
   vite: 3.1.4_sass@1.55.0+terser@5.15.0
   vite-plugin-svg-icons: 2.0.1_vite@3.1.4
+  vite-svg-loader: 3.6.0
   vue-eslint-parser: 9.1.0_eslint@8.24.0
   vue-tsc: 0.40.13_typescript@4.8.4
 
@@ -3764,6 +3766,13 @@ packages:
       - supports-color
     dev: true
 
+  /vite-svg-loader/3.6.0:
+    resolution: {integrity: sha512-bZJffcgCREW57kNkgMhuNqeDznWXyQwJ3wKrRhHLMMzwDnP5jr3vXW3cqsmquRR7VTP5mLdKj1/zzPPooGUuPw==}
+    dependencies:
+      '@vue/compiler-sfc': 3.2.39
+      svgo: 2.8.0
+    dev: true
+
   /vite/3.1.4_sass@1.55.0+terser@5.15.0:
     resolution: {integrity: sha512-JoQI08aBjY9lycL7jcEq4p9o1xUjq5aRvdH4KWaXtkSx7e7RpAh9D3IjzDWRD4Fg44LS3oDAIOG/Kq1L+82psA==}
     engines: {node: ^14.18.0 || >=16.0.0}

src/router/index.ts

@@ -17,6 +17,21 @@ export const constantRoutes: RouteRecordRaw[] = [
       }
     ]
   },
+  {
+    path: "/403",
+    component: () => import("@/views/error-page/403.vue"),
+    meta: {
+      hidden: true
+    }
+  },
+  {
+    path: "/404",
+    component: () => import("@/views/error-page/404.vue"),
+    meta: {
+      hidden: true
+    },
+    alias: "/:pathMatch(.*)*"
+  },
   {
     path: "/login",
     component: () => import("@/views/login/index.vue"),
@@ -172,33 +187,12 @@ export const asyncRoutes: RouteRecordRaw[] = [
     ]
   },
   {
-    path: "/:pathMatch(.*)*", // 必须将 'ErrorPage' 路由放在最后, Must put the 'ErrorPage' route at the end
-    component: Layout,
+    path: "/:pathMatch(.*)*", // Must put the 'ErrorPage' route at the end, 必须将 'ErrorPage' 路由放在最后
     redirect: "/404",
     name: "ErrorPage",
     meta: {
-      title: "错误页面",
-      icon: "404",
       hidden: true
-    },
-    children: [
-      {
-        path: "403",
-        component: () => import("@/views/error-page/403.vue"),
-        name: "403",
-        meta: {
-          title: "403"
-        }
-      },
-      {
-        path: "404",
-        component: () => import("@/views/error-page/404.vue"),
-        name: "404",
-        meta: {
-          title: "404"
-        }
-      }
-    ]
+    }
   }
 ]
 

src/views/error-page/403.vue

@@ -1,19 +1,16 @@
+<script lang="ts" setup>
+import Svg403 from "@/assets/error-page/403.svg?component" // vite-svg-loader 插件的功能
+</script>
+
 <template>
-  <div>
-    <p class="code">403</p>
-    <p class="describe">你没有权限去该页面</p>
+  <div class="error-page">
+    <Svg403 class="error-page-svg" />
+    <router-link to="/">
+      <el-button type="primary">回到首页</el-button>
+    </router-link>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.code {
-  text-align: center;
-  font-size: 140px;
-  margin-bottom: 50px;
-}
-
-.describe {
-  text-align: center;
-  font-size: 40px;
-}
+@import "./index.scss";
 </style>

src/views/error-page/404.vue

@@ -1,19 +1,16 @@
+<script lang="ts" setup>
+import Svg404 from "@/assets/error-page/404.svg?component" // vite-svg-loader 插件的功能
+</script>
+
 <template>
-  <div>
-    <p class="code">404</p>
-    <p class="describe">未找到你想要的页面</p>
+  <div class="error-page">
+    <Svg404 class="error-page-svg" />
+    <router-link to="/">
+      <el-button type="primary">回到首页</el-button>
+    </router-link>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.code {
-  text-align: center;
-  font-size: 140px;
-  margin-bottom: 50px;
-}
-
-.describe {
-  text-align: center;
-  font-size: 40px;
-}
+@import "./index.scss";
 </style>

src/views/error-page/index.scss

@@ -0,0 +1,11 @@
+.error-page {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &-svg {
+    width: 400px;
+    margin-bottom: 50px;
+  }
+}

vite.config.ts

@@ -3,6 +3,7 @@ import type { ConfigEnv, UserConfigExport } from "vite"
 import path, { resolve } from "path"
 import vue from "@vitejs/plugin-vue"
 import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
+import svgLoader from "vite-svg-loader"
 import UnoCSS from "unocss/vite"
 
 /** 配置项文档：https://cn.vitejs.dev/config */
@@ -65,6 +66,8 @@ export default (configEnv: ConfigEnv): UserConfigExport => {
     /** Vite 插件 */
     plugins: [
       vue(),
+      /** 将 SVG 静态图转化为 Vue 组件 */
+      svgLoader(),
       /** SVG */
       createSvgIconsPlugin({
         iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],